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

使用 Boolean 属性，您甚至根本不需要为属性设置 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 属性完成）。

最重要的是， JavaScript 对象属性值可以与HTML 元素属性值不同。 这可能会令人困惑，但 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

 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 3

btn.removeAttribute("disabled");

Answer 4

element.disabled = true
element.disabled = false

这是完全有效的并且可以按您的预期工作 - 即在设置为 true 时不会禁用元素，如已接受的答案所建议的那样。