How to disable HTML button using JavaScript?

Jack Roscoe picture Jack Roscoe · Jun 10, 2010 · Viewed 541.7k times · Source

I’ve read that you can disable (make physically unclickable) an HTML button simply by appending disable to its tag, but not as an attribute, as follows:

<input type="button" name=myButton value="disable" disabled>

Since this setting is not an attribute, how can I add this in dynamically via JavaScript to disable a button that was previously enabled?

Answer

Quentin picture Quentin · Jun 10, 2010

Since this setting is not an attribute

It is an attribute.

Some attributes are defined as boolean, which means you can specify their value and leave everything else out. i.e. Instead of disabled="disabled", you include only the bold part. In HTML 4, you should include only the bold part as the full version is marked as a feature with limited support (although that is less true now then when the spec was written).

As of HTML 5, the rules have changed and now you include only the name and not the value. This makes no practical difference because the name and the value are the same.

The DOM property is also called disabled and is a boolean that takes true or false.

foo.disabled = true;

In theory you can also foo.setAttribute('disabled', 'disabled'); and foo.removeAttribute("disabled"), but I wouldn't trust this with older versions of Internet Explorer (which are notoriously buggy when it comes to setAttribute).