Check if an Element is Disabled using JavaScript

avatar

Borislav Hadzhiev

Mon Jan 10 20222 min read

banner

Photo by Ryan Dam

Check if an Element is Disabled using JavaScript #

Use the disabled property to check if an element is disabled, e.g. if (element.disabled) {}. The disabled property returns true when the element is disabled, otherwise false is returned.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input disabled type="text" id="first_name" name="first_name" /> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const element = document.getElementById('first_name'); console.log(element.disabled); // ๐Ÿ‘‰๏ธ true if (element.disabled) { console.log('โœ… element is disabled'); } else { console.log('โ›”๏ธ element is not disabled'); } // โœ… Set attribute disabled // element.setAttribute('disabled', '') // โœ… Remove attribute disabled // element.removeAttribute('disabled');

The disabled property on an element returns true if the element is disabled and false otherwise.

When the disabled attribute is set on the element, the element is not mutable and cannot be focused.

You should always use the disabled property to check if an element is disabled.

Some examples online use the getAttribute() method on the element, however boolean attributes like disabled might not have a value.

index.js
const element = document.getElementById('first_name'); // ๐Ÿ‘‡๏ธ returns empty string console.log(element.getAttribute('disabled')); // โŒ DON'T DO THIS if (element.getAttribute('disabled')) { console.log('โœ… element is disabled'); } else { console.log('โ›”๏ธ element is not disabled'); }

The getAttribute method returns the value of the provided attribute on the element.

However, it's a best practice to set boolean attributes, such as disabled, without a value.

If a boolean attribute is present at all, regardless of the value, its value is considered to be true.

If a boolean attribute is not present, the value of the attribute is considered to be false.

Therefore the disabled attribute could be set without a value on the element and the getAttribute method would return a false negative.

If you need to remove the disabled attribute from an element, use the removeAttribute() method.

index.js
const element = document.getElementById('first_name'); // โœ… Remove attribute disabled element.removeAttribute('disabled');

The removeAttribute method removes the provided attribute from the element.

If the attribute does not exist on the element, the method returns without throwing an error.

If you need to set the disabled attribute on an element, use the setAttribute() method.

index.js
const element = document.getElementById('first_name'); // โœ… Set attribute disabled element.setAttribute('disabled', '');

The method takes the following 2 parameters:

  1. name - the name of the attribute to be set.
  2. value- the value to assign to the attribute.
We provided an empty string as the value for the disabled attribute, because it's a best practice to set boolean attributes without a value.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee