Remove the "disabled" Attribute using JavaScript

Remove the "disabled" Attribute using JavaScript #

To remove the disabled attribute, select the element and call the removeAttribute() method on it, passing it disabled as a parameter, e.g. btn.removeAttribute('disabled'). The removeAttribute method will remove the disabled attribute from the element.

Here is the HTML for the examples in this article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button disabled id="btn">Button</button>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const btn = document.getElementById('btn');

// ✅ Remove disabled attribute from button
btn.removeAttribute('disabled');

// ✅ Add disabled attribute to button
// btn.setAttribute('disabled', '');

We selected the button using the document.getElementById() method.

We then used the removeAttribute method to remove the disabled attribute from the element.

The method takes the attribute to remove as a parameter.

If the attribute does not exist on the element, the removeAttribute() method does not throw an error, it ignores the call.

When setting the value of a boolean attribute, such as disabled, we can specify any value for the attribute and it will work.

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

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

If you need to add an attribute, you can use the setAttribute method.

index.js

Copied!
const btn = document.getElementById('btn');

// ✅ Remove disabled attribute from button
btn.removeAttribute('disabled');

// ✅ Add disabled attribute to button
btn.setAttribute('disabled', '');

The method takes the attribute name as the first parameter and the value that should be assigned to the attribute as the second.

When setting boolean attributes, such as disabled, it's a best practice to set them to an empty value, that's why we passed an empty string as the value in the example.

The disabled attribute can be set to any value and as long as it is present on the element, it does the job.

Note that you should only call the removeAttribute() method on DOM elements. If you need to remove the disabled attribute from a collection of elements, you have to iterate over the collection and call the method on each individual element.

Here is the HTML for the next example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button disabled class="btn">Button</button>
    <button disabled class="btn">Button</button>
    <button disabled class="btn">Button</button>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const buttons = document.querySelectorAll('.btn');

for (const button of buttons) {
  // ✅ Remove disabled attribute from button
  button.removeAttribute('disabled');
}

We used the document.querySelectorAll method to select all elements with a class of btn.

We used the for...of loop to iterate over the collection and remove the disabled attribute from each element.

Remove the "disabled" Attribute using JavaScript

Remove the "disabled" Attribute using JavaScript #

Join my newsletter

Borislav Hadzhiev