What is the correct value for the disabled attribute?

Question

What is the correct value for the disabled attribute for a textbox or textarea?

I've seen the following used before:

<input type="text" disabled />
<input type="text" disabled="disabled" />
<input type="text" disabled="true" />

Heterotopia

The link I posted as a comment to js1568's answer confirms/clarifies what @Marc B is saying: whatwg.org/specs/web-apps/current-work/multipage/… – Reiko

possible duplicate of #1034444 because both are boolean attributes (not flagged) – Harrietteharrigan

Answer 1

• For XHTML, <input type="text" disabled="disabled" /> is the valid markup.
• For HTML5, <input type="text" disabled /> is valid and used by W3C on their samples.
• In fact, both ways works on all major browsers.

Jointless

In html5, input is a void element and doesn't need a self closing slash: w3.org/TR/html5/syntax.html#void-elements and w3.org/TR/html5/syntax.html#syntax-start-tag – Plastered

@Plastered K. It doesn't need it, unless doing polyglot HTML/XML markup. – Intaglio

Answer 2

HTML5 spec:

http://www.w3.org/TR/html5/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute :

The checked content attribute is a boolean attribute

http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes :

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

Conclusion:

The following are valid, equivalent and true:

<input type="text" disabled />
<input type="text" disabled="" />
<input type="text" disabled="disabled" />
<input type="text" disabled="DiSaBlEd" />

The following are invalid:

<input type="text" disabled="0" />
<input type="text" disabled="1" />
<input type="text" disabled="false" />
<input type="text" disabled="true" />

The absence of the attribute is the only valid syntax for false:

<input type="text" />

Recommendation

If you care about writing valid XHTML, use disabled="disabled", since <input disabled> is invalid and other alternatives are less readable. Else, just use <input disabled> as it is shorter.

Harrietteharrigan

Note: If you use AngularJS, and need to bind disabled state to a variable, you can use ng-disabled instead. Similar with other attributes like this, generally they have intelligent ng-* counterpart – Inanna

disabled={true} works in reactJs JSX code but I'm sure it would get transpiled to one of valid/allowed HTML5 formats only. – Morena

Answer 3

I just tried all of these, and for IE11, the only thing that seems to work is disabled="true". Values of disabled or no value given didnt work. As a matter of fact, the jsp got an error that equal is required for all fields, so I had to specify disabled="true" for this to work.

Craftsman

OP's question was about HTML (i.e. client-side controls). You are looking at server-side controls; those have different conventions. You'll notice the difference if you inspect the HTML output by your JSP. If you still have doubts, try this fiddle in IE11. – Yemen

I've seen the same thing on client side on IE 11 . IE 11 forces something to exist, so just setting disabled results in disabled="" – Astri

Answer 4

setAttribute() on MDN:

To set the value of a Boolean attribute, such as disabled, you can specify any value. An empty string or the name of the attribute are recommended values. All that matters is that if the attribute is present at all, regardless of its actual value, its value is considered to be true. The absence of the attribute means its value is false. By setting the value of the disabled attribute to the empty string (""), we are setting disabled to true, which results in the button being disabled.

Link to MDN

Solution

• I think in XHTML Strict is right disabled="disabled",
• in HTML5 is just disabled, like <input name="myinput" disabled>.
• In javascript I am setting the value to true using e.disabled = true;
  or to "" using setAttribute( "disabled", "" );

Test in Chrome

var f = document.querySelectorAll( "label.disabled input" );
for( var i = 0; i < f.length; i++ )
{
    // Reference
    var e = f[ i ];

    // Actions
    e.setAttribute( "disabled", false|null|undefined|""|0|"disabled" );
    /*
        <input disabled="false"|"null"|"undefined"|empty|"0"|"disabled">
        e.getAttribute( "disabled" ) === "false"|"null"|"undefined"|""|"0"|"disabled"
        e.disabled === true
    */
    
    e.removeAttribute( "disabled" );
    /*
        <input>
        e.getAttribute( "disabled" ) === null
        e.disabled === false
    */

    e.disabled = false|null|undefined|""|0;
    /*
        <input>
        e.getAttribute( "disabled" ) === null|null|null|null|null
        e.disabled === false
    */

    e.disabled = true|" "|"disabled"|1;
    /*
        <input disabled>
        e.getAttribute( "disabled" ) === ""|""|""|""
        e.disabled === true
    */
}

Neff

Answer 5

In HTML5, there is no correct value, all the major browsers do not really care what the attribute is, they are just checking if the attribute exists so the element is disabled.

Greatniece