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

html disabled-control
aless80 picture aless80 · Sep 23, 2015 · Viewed 83.6k times · Source

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

Dai picture Dai · Sep 23, 2015

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.

Related questions

how to disable a html button after it has been clicked not a submit button

hi i have a html button and when you press it, it should give you the distances of shops from where you are so when you press it they appear now the problem is because it is in early stages …

Read More
Enable disable HTML table element with JQuery in disabled <TR>

I am creating a dynamic HTML table with JQuery. Sample code is below. var tbody=$("#myTable tbody"); var tableRow; if(somevariableIsTrue) tableRow=$("<tr>").attr("disabled",true); else tableRow=$("<tr>"); var td=$("<td>"); td.appendTo(…

Read More
how to disable HTML textbox focus and that textbox value should submit

i am working on forms i used ReadOnly in Focus is there any data is submitting but not able to edit that textbox data. i used disabled in no focus is there and no edit but that textbox values is …

Read More