Set/Remove the "disabled" Attribute using JavaScript

# Set the disabled Attribute using JavaScript

To set the disabled attribute, select the element and call the setAttribute() method on it, passing it disabled as the first parameter.

The setAttribute method will add the disabled attribute to the element.

Here is the HTML for the examples.

index.html

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

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

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

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

// ✅ Set the disabled attribute
button.setAttribute('disabled', '');

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

set disabled attribute

The code for this article is available on GitHub

If you need to remove the disabled attribute, use the removeAttribute() 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', '');

We used the document.getElementById() method to select the element by its id.

We then used the setAttribute() method to add the disabled attribute to the button.

The method takes the following 2 parameters:

name - the name of the attribute to be set.
value- the value to assign to the attribute.

If the attribute already exists on the element, the value is updated, otherwise, a new attribute is added with the specified name and value.

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 is not present, the value of the attribute is considered to be false.

If you need to remove an attribute, use the removeAttribute method.

index.js

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

// ✅ Set the disabled attribute
button.setAttribute('disabled', '');

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

When setting the disabled attribute, we pass an empty string as the value for the attribute because it's a best practice to set boolean attributes without a value.

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

# Setting the disabled attribute on multiple elements

Note that you can only call the setAttribute method on DOM elements.

If you need to set the disabled attribute on a collection of elements, you have to iterate over the collection and call the method on each element.

Here is the HTML for the next example.

index.html

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

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

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

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

for (const button of buttons) {
  // ✅ Set the disabled attribute
  button.setAttribute('disabled', '');

  // ✅ Remove the disabled attribute
  // button.removeAttribute('disabled');
}

set attribute disabled multiple elements

The code for this article is available on GitHub

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 set the disabled attribute on each element.

# Removing the disabled attribute from multiple elements

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>

The code for this article is available on GitHub

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');
}

remove the disabled attribute from multiple elements

The code for this article is available on GitHub

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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Set/Remove the "disabled" Attribute using JavaScript

# Set the disabled Attribute using JavaScript

# Setting the disabled attribute on multiple elements

# Removing the disabled attribute from multiple elements

# Additional Resources

Borislav Hadzhiev