在纯JavaScript中启用/禁用按钮

Question

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

btn.setAttribute("disabled", true);

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

btn.setAttribute("disabled", false);

Answer 1

disabled 是一个布尔属性,仅仅存在它会导致元素被禁用,无论该属性的值实际是什么.

<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中,您根本不需要设置任何值:

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

这就是为什么你可以通过设置属性来禁用JavaScript中的元素true,你可以将它设置为任何东西(这就是为什么当你设置它时false它仍然被禁用).

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

element.removeAttribute("disabled");

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

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

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

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

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

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

1. 与工作元素的当前HTML状态(与完成 disabled,setAttribute()和removeAttribute()).
2. 使用内存中元素的元素当前DOM对象状态(使用表示当前状态的JavaScript属性完成).

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

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

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

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

来自MDN:

要启用该元素,请完全保留此属性,而不是将值设置为getAttribute().