4

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).

Legion
  • 3,922
  • 8
  • 51
  • 95
  • 1
    It isn't butchered. You just need to understand the difference between properties and attributes. – cookie monster May 16 '14 at 18:20
  • I disagree. The decision to make disabled an attribute instead of a property was the error. – Legion May 16 '14 at 18:41
  • 1
    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 May 16 '14 at 19:12
  • element.removeAttribute('disabled') or element.disabled=false both work in IE8, but older ie requires the second (property) assignment. – kennebec May 16 '14 at 19:30

5 Answers5

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().

canon
  • 40,609
  • 10
  • 73
  • 97
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.

Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
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.

michaelward82
  • 4,706
  • 26
  • 40
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

Ryan S
  • 370
  • 2
  • 12
-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>
user3597525
  • 69
  • 3