在纯JavaScript中启用/禁用按钮

Question

我想启用/禁用没有jquery的按钮。这是我的代码：

btn.setAttribute("disabled", true);

作品。但这不是 - 一个按钮仍然被禁用：

btn.setAttribute("disabled", false);

Answer 1

disabled是一个布尔属性，仅仅存在它会导致元素被禁用，无论该属性的值实际是什么。这就是为什么你可以通过将属性设置为true来禁用JavaScript中的元素，你可以将它设置为任何东西（这就是为什么当你将它设置为false它仍然被禁用时）。

<input type="button" value="I'm disabled" disabled="true">
<input type="button" value="I'm disabled" disabled="false">
<input type="button" value="I'm disabled" disabled="doesn't matter">
<input type="button" value="I'm disabled" disabled="">

在HTML中，您根本不需要为属性设置a的值：

<input type="button" value="I'm disabled" disabled>

但是，使用布尔属性的推荐约定（如果您确实要为属性提供值），以便我们可以在开发人员之间保持一致，就是将它们的值设置为等于属性名称本身。因此，要按照建议的约定禁用JavaScript中的元素：

element.setAttribute("disabled", "disabled");

因此，要启用元素，不要将disabled属性设置为任何值，因为正如我们所见，它只是禁用它，您需要完全删除disabled属性：

element.removeAttribute("disabled");

document.querySelector("input[type='button']").removeAttribute("disabled");

<input type="button" value="I'm NOT disabled" disabled="disabled">

---

现在，在JavaScript中使用DOM对象时，有两种方法可以影响元素的当前状态，了解使用这两种技术的效果非常重要：

1. 使用元素的当前HTML状态（使用setAttribute()，removeAttribute()和getAttribute()完成）。
2. 使用内存中元素的元素当前DOM对象状态（使用表示当前状态的JavaScript属性完成）。

最重要的是，属性值可以与属性值不同。这可能令人困惑，但HTML状态是从外部看起来的元素，属性状态是内部真正发生的事情，就像你可以把一张快乐的脸放在上面，以便那些看着你的人认为你的快乐（ HTML状态），但实际上你可能真的很难过（属性状态）。

当尚未设置属性状态时，属性状态是重要的，并且将完全控制元素的状态。设置属性状态后，它将覆盖属性状态，并控制元素的实际状态。

// Get a reference to the button
var btn = document.querySelector("[type=button]");

// Test what the current HTML state is:
console.log(btn.getAttribute("disabled"));

// Test what the current mapped property state is:
console.log(btn.disabled);

// Change the property state, which will override the HTML state and 
// and cause it to become enabled.
btn.disabled = false;

// Test what the current HTML state is:
console.log(btn.getAttribute("disabled"));  // null because property overrode HTML

// Test what the current mapped property value is:
console.log(btn.disabled);

<input type="button" value="I'm disabled" disabled="disabled">

来自MDN：

要启用元素，请完全保留此属性，而不是将值设置为false。

Answer 2

btn.removeAttribute("disabled");

Answer 3

function getElement(elm){
    return document.getElementById(elm);
}

/*-------------FUNCTION TO DISABLE AN TEXT BOX------------------*/
function disable(elm){
    return getElement(elm).setAttribute("disabled", true);
}
//==============================================================//
/*--------------FUNCTION TO ENABLE AN TEXT BOX------------------*/
function enable(elm){
    return getElement(elm).removeAttribute("disabled");
}
//==============================================================//

function disableEnable(){
      if(getElement("button").disabled){
            enable("button");
            enable("input-button");
      }
      else{
            disable("button");
            disable("input-button");
      } 
}

<button id="button">Button</button>
<input id="input-button" type="button" value="Input Button"/>

<br/><br/><br/>
<button onClick="disableEnable();"> Disable/Enable Buttons Above</button>

Answer 4

element.disabled = true
element.disabled = false

这是完全有效的，并且按照您的预期工作 - 即，当接受的答案建议设置为true时不会禁用该元素。