如何动态启用禁用的复选框？

请看这里：http://jsfiddle.net/nShQs/ http://jsfiddle.net/nShQs/

按禁用按钮，然后按启用按钮。该复选框未启用。

HTML:

<input id="check" type="checkbox"/>
<input id="btn1" type="button" value="enable" />
<input id="btn2" type="button" value="disable" />

JS:

function enable() {
    var x = document.getElementById("check");
    alert(x.getAttribute("disabled"));
    x.setAttribute("disabled", "false");
    alert(x.getAttribute("disabled"));
}

function disable() {
    var x = document.getElementById("check");
    alert(x.getAttribute("disabled"));
    x.setAttribute("disabled", "true");
    alert(x.getAttribute("disabled"));
}
document.getElementById("btn1").addEventListener("click", enable);
document.getElementById("btn2").addEventListener("click", disable);

answer

正如答案所说，这是因为disabled属性是一个布尔属性。 看here http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attribute.

Just do

function enable() {
    document.getElementById("check").disabled= false;

}

function disable() {
     document.getElementById("check").disabled= true;
}

这样您就可以设置 DOM 元素的属性，同时设置属性的属性存在disabled将禁用该复选框，所以即使您这样做x.setAttribute("disabled", "false");它仍然作为属性存在于元素上。

Demo http://jsfiddle.net/CyVtb/

或者你会这样做：

function disable() {
    document.getElementById("check").setAttribute('disabled', 'disabled');
}

function enable() {
   document.getElementById("check").removeAttribute('disabled');
}

disabled作为属性和disabled因为属性不同。