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:
- Check if an element is a checkbox using javascript
- Show/hide a div element by id using javascript
- Clear the Content of a Div element using JavaScript
My name is Fred Hall. My hobby is studying programming languages, which I would like to share with you. Please do not hesitate to contact me if you are having problems learning the computer languages Java, JavaScript, C, C#, Perl, or Python. I will respond to all of your inquiries.
Name of the university: HUSC
Major: IT
Programming Languages: Java, JavaScript, C , C#, Perl, Python