Explicitly set disabled=“false” in the HTML does not work

问题

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.

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

回答2:

In future, can help someone.

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

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

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

来源：https://stackoverflow.com/questions/32745276/explicitly-set-disabled-false-in-the-html-does-not-work

标签

html

disabled-control