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

Question

请看这里: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);

回答

正如答案所说,这是因为该disabled属性是一个布尔属性.看到这里.

Answer 1

做就是了

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

}

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

有了这个,你设置DOM元素的属性,而设置属性的属性disabled将禁用复选框,所以即使你这样做x.setAttribute("disabled", "false");仍然会在元素作为属性.

演示

或者你会这样做:

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

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

disabled属性和disabled属性是不同的.

Answer 2

设置disabled 属性而不是属性(小提琴).

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

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

如果disabled 属性存在,控件将保持禁用状态- 无论其值(小提琴)如何.将disabled 属性设置为false将删除该disabled 属性.