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.

Isar

“but it is not convenient to do that for many elements in the html”… why? – Abundance

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

Tobit

Thank you for the information. However, omitting disabled does not mean putting disabled to off (which is what I need). I just disabled an element on www.google.com and reloaded the page. That element is still disabled – Isar

@Isar An element should not remain disabled after reloading the page. What are you doing, exactly? – Tobit

I give you a scenario. I am using firefox. 1) Say that my webpage stops execution (because of a bug, because I am debugging or because I refresh the page) while the button is disabled. When I refresh the page (not a hard refresh!) the button will be disabled. For this reason, I would like to set disabled off in the html. Sorry, neglect what I wrote above about google.com. – Isar

Hard refresh= Ctrl+Shift+R or Shift+F5 A hard refresh is a way of clearing the browser's cache for a specific page, to force it to load the most recent version of a page. – Isar

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');
}

Samurai

Answer 3

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

Vanya

Answer 4

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.

Pipit

Yes, my post is quite old and I cannot reproduce the issue anymore (getting a disabled button because of for example a code crash). Are you sure you found an example when the button is disabled when you fire up the page, and adding enabled enables it? – Isar

I didn't actually test it with both tags. interestingly, if the tag disabled is included, enabled does not enable it. It looks like priority goes to the disabled state. Obviously however, (no idea what your original code problem looked like of course) it would be programatically possible to set enabled or disabled on a single variable. eg <button $enabled> and then setting it to either enabled or disabled at that time. – Pipit

ah see I thought you would be able to pass it a boolean, e.g. <button enabled="false"> Cheers – Imp

The "enabled" attribute is invalid HTML. To enable an element, just remove the "disabled" attribute. – Dobbins

Answer 5

You have to use element.removeAttribute("disabled");

Thanks

Ithunn

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Mahatma

Answer 6

In 2022 if you're using EJS or Vue, you should be setting it as:

EJS:

<div <%=true?'enabled':'disabled'%> ></div>

Vue:

<div :disabled="someFuncInMethods()"></div>

Crept

The "enabled" attribute is invalid HTML. To enable an element, just remove the "disabled" attribute. Also, the "disabled" attribute can not have any other values than "disabled", an empty string, or just a missing value. – Dobbins