Question

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

btn.setAttribute("disabled", true);

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

btn.setAttribute("disabled", false);

Answer 1

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

＆＃13;

<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="">

＆＃13;

在HTML中，您甚至不需要为该属性设置a的值：

＆＃13;

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

＆＃13;

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

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

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

element.removeAttribute("disabled");

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

最重要的是，属性值可能与属性值不同。这可能令人困惑，但HTML状态就是元素看起来像是从外面看，财产状态是内部真正发生的事情，就像你可以放一张幸福的脸，以便看着你的人认为你的快乐（HTML状态），但你可能真的很伤心真实（财产州）。

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

＆＃13;

// 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);

＆＃13;

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

＆＃13;

来自 MDN ：

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

Answer 2

btn.removeAttribute("disabled");

Answer 3

element.disabled = true
element.disabled = false

这是完全有效的，并且可以按您期望的那样工作-即，如果接受的答案表明设置为true，则不会禁用该元素。

Answer 4

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>

在纯JavaScript中启用/禁用按钮

4 个答案: