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.

_“but it is not convenient to do that for many elements in the html”_… why? — Sebastian Simon, Sep 23 '15 at 16:59

Dai · Accepted Answer · 2021-07-18T14:22:15.680

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

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 — aless80, Sep 23 '15 at 17:44
@aless80 An element should not remain disabled after reloading the page. What are you doing, exactly? — Dai, Sep 23 '15 at 17:56
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. — aless80, Sep 23 '15 at 18:20
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. — aless80, Sep 23 '15 at 18:59

score 13 · Answer 2 · edited May 28 '20 at 08:03

13

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

edited May 28 '20 at 08:03

gastonmancini

1,102
8
19

answered Aug 29 '17 at 04:07

Marcelo

1,486
13
16

score 4 · Answer 3 · edited Mar 22 '18 at 15:51

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

edited Mar 22 '18 at 15:51

Josh Mein

28,107
15
76
87

answered Mar 09 '17 at 10:31

Daniel Perník

5,464
2
38
46

score 3 · Answer 4 · answered Jun 14 '17 at 10:15

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.

answered Jun 14 '17 at 10:15

Adsy2010

525
6
23

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? – aless80 Jun 15 '17 at 18:27
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 ` – Adsy2010 Jun 16 '17 at 19:42
1

ah see I thought you would be able to pass it a boolean, e.g. – Ciaran Gallagher Mar 28 '18 at 09:17
2

The "enabled" attribute is invalid HTML. To enable an element, just remove the "disabled" attribute. – Peter Jan 05 '23 at 15:56

score 0 · Answer 5 · answered Dec 08 '22 at 22:25

0

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

Thanks

answered Dec 08 '22 at 22:25

Francisco Josimar Lionel Filho

1

1

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](/help/how-to-answer). – Community Dec 13 '22 at 09:04

score -1 · Answer 6 · answered Apr 07 '22 at 08:43

-1

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>

answered Apr 07 '22 at 08:43

Ivan Kolyhalov

902
11
16

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. – Peter Jan 05 '23 at 15:58

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

6 Answers6

Linked