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

0 0 1 minute read

The task is to remove the disabled attribute from the input element using JavaScript. This can be achieved by the following two approaches.

Selecting elements’s id and setting the disabled property to false
Selecting elements’s class and setting the disabled property to false

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

Example : This example implements the above approach

html

<!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;">
            zambiatek
    </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: This example implements the above approach

html

<!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;">
            zambiatek
    </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>