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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.