Open In App
Related Articles

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

Improve Article
Improve
Save Article
Save
Like Article
Like

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

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;">
            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: 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;">
            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:


Last Updated : 16 Mar, 2023
Like Article
Save Article
Similar Reads
Related Tutorials