Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.

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:

gty

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>


Output:



Last Updated : 29 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads