How To Remove the “disabled” Attribute using JavaScript

Remove the “disabled” Attribute using JavaScript

To Remove the disabled Attribute using JavaScript, there are some methods we have: Using removeAttribute() function or Set the disabled to false. Follow the article to better understand.

Remove the “disabled” Attribute using JavaScript

Using removeAttribute() in JavaScript.

The best way to remove the “disabled” Attribute in JavaScript is using removeAttribute() method. The removeAttribute() method removes the attribute with the specified name.

In this example, we will use the getElementsByClassName() to get the correct element you want to remove the disabled attribute, then we use the removedAttribute() method to remove the disabled attribute in the element. 

getElementsByClassName() method

Syntax: document.getElementsByClassName(classname)

Parameter: 

  •   classname: the classname of the element. You can search for multiple class names separated by space.

Return value: the return value is an object, a collection of elements with the specified value.

removedAttribute() method

Syntax: element.removeAttribute(name)

Parameter: 

  •   name: The name of the attribute.

Return value: return value is None.

Code Example

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <h2 id="header">Learn Share IT <br> <input class="edit" disabled>   <input class="edit" disabled> </h2>    
    <script src="src/script.js"></script>
  </body>
</html>

Script.js

// Create the inputs to get the element to have class name is edit 
const inputs = document.getElementsByClassName('edit');

// Loop to all input elements and remove disabled attribute in them
for (const edit of inputs) {
  edit.removeAttribute('disabled');
}

Output

Before removing the disabled attribute:

After removing the disabled attribute:

Set the disabled to false method

Another way to remove the “disabled” attribute in JavaScript is to Set the disabled to false through the name property.

Example

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <h2 id="header">Learn Share IT <br> <input class="edit" disabled>   <input class="edit" disabled> </h2>    
    <script src="src/script.js"></script>
  </body>
</html>

Script.js

// Create the inputs to get the element have the class name is edit 
const inputs = document.getElementsByClassName('edit');
 
// Loop to all input element and set the disabled attribute is false
for(var i = 0; i < inputs.length; i++) {
  inputs[i].disabled = false;
}

Output

Before removing the disabled attribute:

After removing the disabled attribute:

Summary

In this tutorial, we have explained how to Remove the “disabled” Attribute using JavaScript with two methods. We always hope this tutorial is helpful to you. Leave your comment here if you have any questions or comments to improve the article.

Thanks for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *