Explicitly set disabled="false" in the HTML does not work

Question

I would like to explicitly set a button as enabled in the html file. The reason is that my code later on toggles the button to disabled and if the code crashes or so I might see the button disabled.

I can disable the button with

$("#btn").attr("disabled","true")

but then an html containing:

<button id="btn" disabled="false">I want to be enabled!</button>

still shows the button as disabled. The inspector shows:

<button id="btn" disabled="">I want to be enabled!</button>

I know I can do

$("#btn").removeAttr("disabled") 

or similar, but it is not convenient to do that for many elements in the html.

Answer 1

HTML doesn't use boolean values for boolean attributes, surprisingly.

In HTML, boolean attributes are specified by either merely adding the attribute name, or (especially in XHTML) by using the attribute name as its value.

<input type="checkbox" disabled>                 <!-- HTML -->
<input type="checkbox" disabled />               <!-- Also HTML -->
<input type="checkbox" disabled="disabled" />    <!-- XHTML and HTML -->

This is documented in the HTML specification: http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

A number of attributes are 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.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

---

To add to the confusion, in the DOM these boolean attributes are specified with boolean values, for example:

/** @type HTMLInputElement */
const inputElement = document.createElement('input');

inputElement.disabled = true; // <-- The DOM *does* use a proper boolean value here.
console.log( inputElement.disabled ); // Prints "true"

inputElement.disabled = false;
console.log( inputElement.disabled ); // Prints "false"

...to add even more confusion - due to JavaScript's falsyness - using string values with the property will not work as you'd expect:

inputElement.disabled = 'true';
console.log( inputElement.disabled ); // Prints "true"

inputElement.disabled = 'false';
console.log( inputElement.disabled ); // *Still* prints "true"

(This is because the JavaScript string 'false' is not type-coerced into the JavaScript boolean value false).

---

Also, some HTML attributes do have true and false as possible values, such as contentEditable (which also has inherit as a third option), also consider <form autocomplete=""> which can be on and off (and many other values), which might trip some people up too. _{I think some legacy (Internet Explorer 4.0-era) extensions like <object> and <applet> may have had boolean attributes, and definitely had booleans in their child <param value=""> attributes, that's just an historical curiosity at this point).}

Answer 2

In future, can help someone.

selectLanguage.onchange = function() {
    var value = selectLanguage.value;
    if (value != '') {
        submitLanguage.removeAttr('disabled');
    } else {
        submitLanguage.attr('disabled', 'disabled');
    }
    // submitLanguage.attr('enabled', 'enabled');
}

Answer 3

I know this is an old topic but as there is no marked answer, does this help? This does answer the explicitly marked as enabled question.

<button enabled>My Text</button>
<!-- Which also works as: -->
<button enabled="enabled">My Text</button>

I too am investigating this for use to enabled a button when validation occurs. I hope this helps someone.

Answer 4

If you are using AngularJS, try ng-disabled instead. In this case you can use stuff like:

ng-disabled="true"
ng-disabled="false"
ng-disabled={{expression}}

and it works as expected....