How to disable HTML button using JavaScript?

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?

Solution 1:

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

Solution 2:

to disable

document.getElementById("btnPlaceOrder").disabled = true; 

to enable

document.getElementById("btnPlaceOrder").disabled = false; 

Solution 3:

It is an attribute, but a boolean one (so it doesn't need a name, just a value -- I know, it's weird). You can set the property equivalent in Javascript:

document.getElementsByName("myButton")[0].disabled = true;

Solution 4:

Try the following:

document.getElementById("id").setAttribute("disabled", "disabled");

Solution 5:

The official way to set the disabled attribute on an HTMLInputElement is this:

var input = document.querySelector('[name="myButton"]');
// Without querySelector API
// var input = document.getElementsByName('myButton').item(0);

// disable
input.setAttribute('disabled', true);
// enable
input.removeAttribute('disabled');

While @kaushar's answer is sufficient for enabling and disabling an HTMLInputElement, and is probably preferable for cross-browser compatibility due to IE's historically buggy setAttribute, it only works because Element properties shadow Element attributes. If a property is set, then the DOM uses the value of the property by default rather than the value of the equivalent attribute.

There is a very important difference between properties and attributes. An example of a true HTMLInputElement property is input.value, and below demonstrates how shadowing works:

var input = document.querySelector('#test');

// the attribute works as expected
console.log('old attribute:', input.getAttribute('value'));
// the property is equal to the attribute when the property is not explicitly set
console.log('old property:', input.value);

// change the input's value property
input.value = "My New Value";

// the attribute remains there because it still exists in the DOM markup
console.log('new attribute:', input.getAttribute('value'));
// but the property is equal to the set value due to the shadowing effect
console.log('new property:', input.value);

<input id="test" type="text" value="Hello World" />

That is what it means to say that properties shadow attributes. This concept also applies to inherited properties on the prototype chain:

function Parent() {
  this.property = 'ParentInstance';
}

Parent.prototype.property = 'ParentPrototype';

// ES5 inheritance
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

function Child() {
  // ES5 super()
  Parent.call(this);

  this.property = 'ChildInstance';
}

Child.prototype.property = 'ChildPrototype';

logChain('new Parent()');

log('-------------------------------');
logChain('Object.create(Parent.prototype)');

log('-----------');
logChain('new Child()');

log('------------------------------');
logChain('Object.create(Child.prototype)');

// below is for demonstration purposes
// don't ever actually use document.write(), eval(), or access __proto__
function log(value) {
  document.write(`<pre>${value}</pre>`);
}

function logChain(code) {
  log(code);

  var object = eval(code);

  do {
    log(`${object.constructor.name} ${object instanceof object.constructor ? 'instance' : 'prototype'} property: ${JSON.stringify(object.property)}`);
    
    object = object.__proto__;
  } while (object !== null);
}

I hope this clarifies any confusion about the difference between properties and attributes.