DOM 'disabled' property in javascript

Question

I can't find a definitive answer to how to use the disabled property to disable form elements in javascript.

Some places say it's a simple boolean. Other's say to set it to the string value 'disabled' to disable, empty string '' to enable. Or there's adding and removing the disabled attribute, usually in combination with a string value.

So which is the proper way to do it cross browser? (no jQuery). How did something as simple as an enable flag get so butchered?

-- edit --

Sorry, I should have mentioned I'm developing for IE8 (not by choice).

It isn't butchered. You just need to understand the difference between properties and attributes. — cookie monster
– cookie monster, Commented May 16, 2014 at 18:20
I disagree. The decision to make disabled an attribute instead of a property was the error. — Legion
– Legion, Commented May 16, 2014 at 18:41
It isn't a matter of one or the other. HTML has attributes. The DOM has properties, with the attributes being modeled separately. Many HTML attributes get translated to DOM element properties. That's where you need to understand the difference. — cookie monster
– cookie monster, Commented May 16, 2014 at 19:12
element.removeAttribute('disabled') or element.disabled=false both work in IE8, but older ie requires the second (property) assignment. — kennebec
– kennebec, Commented May 16, 2014 at 19:30

canon · Accepted Answer · 2015-01-16 15:13:52Z

20

The following input elements are all disabled:

<input disabled />
<input disabled="" />
<input disabled="disabled" />
<input disabled="true" />
<input disabled="false" /> <!-- still disabled! -->

If a boolean attribute is present, it's on; otherwise, it's off. The value doesn't mean anything.

However, when dealing with these elements through javascript, you should make use of the corresponding property, i.e.:

myInput.disabled = true; // adds the attribute and disables control
myInput.disabled = false; // removes the attribute and enables control

The property will update the attribute for you. This is true of all boolean attribute / property pairs, i.e.: readonly, checked, selected, etc.

Confusion may stem from the fact that setAttribute() asks for both a name and value and emits markup in a key="value" format -even when you don't want a value. When adding a custom boolean attribute, I simply set the attribute without a value (sample):

input.setAttributeNode(document.createAttribute("data-custom"));
console.log(input); // <input data-custom>

_{See document.createAttribute() and Element.setAttributeNode().}

edited Jan 16, 2015 at 15:13

answered May 16, 2014 at 17:53

canon

41.9k10 gold badges78 silver badges102 bronze badges

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

4 Comments

Colin DeClue Over a year ago

There's no javascript here

cHao Over a year ago

Particularly note the last HTML example. <input disabled="false"> is basically the HTML lying to you. Don't do that. Avoid disabled="true" as well, even if just to head off the thought process of "well, if true disables it...".

canon Over a year ago

@colin lies, all lies.

Bergi Over a year ago

You should also note that both disabled="true" and disabled="false" are simply invalid HTML.

Community · Accepted Answer · 2017-05-23 10:29:21Z

8

The .disabled property of DOM elements is a boolean value and should get booleans assigned.

The disabled HTML attribute, like in markup or setAttribute(), is a "boolean html attribute" which means it can take the values empty, disabled or be omitted. See also HTML - Why boolean attributes do not have boolean value? and Correct value for disabled attribute.

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered May 16, 2014 at 17:49

Bergi

672k162 gold badges1k silver badges1.5k bronze badges

Comments

Ryan S · Accepted Answer · 2014-05-16 17:50:10Z

1

The disabled attribute is a boolean. If the tag is present the input will be disabled. The confusion around having a string value associated with it usually comes from XHTML validation. In XHTML attribute minimization is forbidden, so it must have a value, and XHTML specification states it must be disabled="disabled".

For any browser, if the tag is present, the input will be disabled, regardless of the string value.

JsFiddle Demo

w3c disabled attribute spec

answered May 16, 2014 at 17:50

Ryan S

3702 silver badges12 bronze badges

Comments

michaelward82 · Accepted Answer · 2014-05-16 17:54:07Z

1

The existence of the property is enough to trigger the disabled state.

If you must set a value for the property then it should be the same as the property name e.g disabled="disabled".

I'll try to find some documentation on the specific behaviours of browsers and the relevant specs.

--edit--

The HTML5 spec covers boolean attributes, such as disabled, here: http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attributes

In practice, web browsers will ignore the assigned value and simply look for the presence of the attribute.

edited May 16, 2014 at 17:54

answered May 16, 2014 at 17:48

michaelward82

4,74628 silver badges40 bronze badges

Comments

user3597525 · Accepted Answer · 2014-05-16 17:55:16Z

-1

Setting disabled to true works on all input types. I've tried it in chrome,firefox,ie edge. Try this;

<!doctype html>
<html lang="en">
<body>
<input type="text" class="disableit">
<textarea class="disableit"></textarea>
<input type="radio" class="disableit">
<select class="disableit"><option>one</option><option>two</option>
<input type="checkbox" class="disableit">

<script>
var inputs = document.getElementsByClassName( "disableit" );
for( var i = 0; i < inputs.length; i++ ){
    inputs[i].disabled = true;
}
</script>
</body>
</html>

answered May 16, 2014 at 17:55

user3597525

693 bronze badges

1 Comment

Zimano Over a year ago

Doesn't work on any browser on iOS, including Chrome.

Collectives™ on Stack Overflow

DOM 'disabled' property in javascript

5 Answers 5

4 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related