How to enable a disabled checkbox dynamically?

Question

Please see here: http://jsfiddle.net/nShQs/

Press the disable button and then the enable button. The checkbox doesn't get enabled.

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

As the answers tell it is because the disabled attribute is a boolean attribute. See here.

I chose PSL's answer because he answered 1st.

batman
– batman

2013-07-11 17:59:03 +00:00
Commented Jul 11, 2013 at 17:59 — batman
– batman, Commented Jul 11, 2013 at 17:59

PSL · Accepted Answer · 2013-07-11 17:42:49Z

48

Just do

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

}

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

With this you are setting the property of the DOM element, while setting attribute presence of attribute disabled will disable the check box, so even if you do x.setAttribute("disabled", "false"); it will still be there on the element as attribute.

Demo

or you would just do:

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

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

disabled as attribute and disabled as property are different.

answered Jul 11, 2013 at 17:42

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

batman Over a year ago

Isn't it rather strange that the disabling depends on the presence of the attribute as opposed to its value?

PSL Over a year ago

@learner yeah that's the way it works.. :) infact you can see the source after disable-> enable. It will still have that attribute with your original code.

PSL Over a year ago

No it is common especially for these kind of boolean property values, i will find a link for you for refernce, diff between attr and properties

canon Over a year ago

@learner some other attributes (like readonly) work the same way. It's sort of unexpected and you'll stumble upon these things mostly by accident. That said, if you stick to the corresponding properties they'll abstract away the weird attribute implementation.

PSL Over a year ago

@learner read the last section: developer.mozilla.org/en-US/docs/Web/HTML/Attributes

|

canon · Accepted Answer · 2013-07-11 17:50:20Z

9

Set the disabled property rather than the attribute (fiddle).

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

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

A control will remain disabled if the disabled attribute is present at all - regardless of its value (fiddle). Setting the disabled property to false will remove the disabled attribute.

edited Jul 11, 2013 at 17:50

answered Jul 11, 2013 at 17:43

canon

41.8k10 gold badges77 silver badges102 bronze badges

Comments

maximus ツ · Accepted Answer · 2013-07-11 17:55:33Z

4

It works,

 x.removeAttribute("disabled");

http://jsfiddle.net/maximos/89wxX/1/

edited Jul 11, 2013 at 17:55

answered Jul 11, 2013 at 17:47

maximus ツ

8,1163 gold badges30 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to enable a disabled checkbox dynamically?

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related