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

Last Updated : 29 Jan, 2024

In HTML, we use input elements for user input. The 'disabled' property helps prevent interaction with these elements. For example, if we only want users over 18 to input their Adhar card numbers, we can use JavaScript to remove the 'disabled' attribute when the user enters an age greater than 18. This ensures that users can only input Adhar card numbers if they meet the specified age requirement. Here, we will learn various approaches to remove the disabled attribute from the HTML input element using JavaScript.

Table of Content

Using the removeAttribute() method
Modifying the 'disabled' property

Using the removeAttribute() method

The 'removeAttribute( )' method in JavaScript is used to eliminate a specific attribute, such as "disabled," from an HTML element, enabling user interaction.

Syntax:

document.getElementById('geeks').removeAttribute('disabled');

Example: This example implements the use of the removeAttribute() method to remove the disabled attribute from the HTML input element.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        To remove “disabled” attribute from
        HTML input element
    </title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>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>
        let down = document.getElementById("gfg");

        function myGFG() {
            document.getElementById('input').removeAttribute('disabled');
            down.innerHTML = "Disabled Attribute removed";
        }
    </script>
</body>

</html>

Output:

Modifying the 'disabled' property

In this method, we change the 'disabled' property value to 'false' instead of removing the 'disabled' property itself from an HTML element. The 'disabled' property, by default, is 'true', and setting it to 'false' achieves the same result as removing the 'disabled' property.

Example: This example implements the use of thedisabled property to remove the disabled attribute from the HTML input element.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        To remove “disabled” attribute from
        HTML input element
    </title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>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>
        let down = document.getElementById("gfg");

        function myGFG() {
            let input = document.getElementsByClassName('inputClass');
            for (var i = 0; i < input.length; i++) {
                input[i].disabled = false;
            }
            down.innerHTML = "Disabled Attribute removed";
        }
    </script>
</body>

</html>