How to remove “disabled” attribute from HTML input element using JavaScript ?

The task is to remove the disabled attribute from the input element using JavaScript. There are two approaches that are discussed below.

Approach 1: Select the input element and use disabled property and set its value to false.

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to remove “disabled” attribute from 
        HTML input element using JavaScript ? 
    </title> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;">  
            GeeksforGeeks  
    </h1> 
    <p> 
        Click on the button to remove disabled attribute 
    </p> 
    Type: 
    <input id="input" disabled /> 
    <br> 
    <br> 
    <button onclick="myGFG()"> 
        Click Here 
    </button> 
    <p id="gfg"> 
    </p> 
    <script> 
        var down = document.getElementById("gfg"); 
  
        function myGFG() { 
            document.getElementById('input').disabled = false; 
            down.innerHTML = "Disabled Attribute removed"; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Approach 2: Select the input element and use disabled property and set its value to false. This example selects input element by its class.

Example:

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to remove “disabled” attribute from 
        HTML input element using JavaScript ? 
    </title> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;">  
            GeeksforGeeks  
    </h1> 
    <p> 
        Click on the button to remove disabled attribute 
    </p> 
    Type: 
    <input id="input" disabled /> 
    <br> 
    <br> 
    <button onclick="myGFG()"> 
        Click Here 
    </button> 
    <p id="gfg"> 
    </p> 
    <script> 
        var down = document.getElementById("gfg"); 
  
        function myGFG() { 
            var input = document.getElementsByClassName('inputClass'); 
            for (var i = 0; i < input.length; i++) { 
                input[i].disabled = false; 
            } 
            down.innerHTML = "Disabled Attribute removed"; 
        } 
    </script> 
</body> 
  
</html> 

Output:

My Personal Notes

Recommended Posts: