Related Articles

Related Articles

HTML | DOM Button disabled Property
  • Last Updated : 19 Feb, 2019

The Button disabled property in HTML DOM is used to set or return whether a Button element would be disabled or not. A disabled element is un-clickable and unusable. It contains a boolean value.

Syntax:

  • It is used to return the button disabled property.
    buttonObject.disabled
  • It is used to set the button disabled property.
    buttonObject.disabled = true|false
  • Property Values:

    • true: It defines that the Button element is disabled.
    • False: It is the default value. It defines that the Button is not disabled.

    Return Value: It returns a boolean value which represents the Button is disabled or not.

    Example 1: This example illustrates how to set the Button disabled property.



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            HTML DOM button disabled Property 
        </title
    </head
      
    <body style="text-align:center"
          
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1
          
        <h2>DOM Button disabled Property</h2
          
        <!-- Assigning id to Button. -->
        <button id="GFG" onclick="hello()">
            Submit
        </button>
          
        <br><br
          
        <p id="sudo"></p>
          
        <b>
            Click on "Try it " Button to
            disabled above Button.
        </b
          
        <br><br>
      
        <button onclick="Geeks()">
            Try it
        </button>
          
        <script
            function Geeks() { 
                  
                // change Boolean value to represent Button
                document.getElementById("GFG").disabled = "true";
            
        </script
    </body
      
    </html>                    

    chevron_right

    
    

    Output:
    Before Click on the “Try it” button:

    After Click on the “Try it” button:

    Example 2: This example illustrates how to return the disabled property.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            HTML DOM button disabled Property 
        </title
    </head
      
    <body style="text-align:center"
      
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1
          
        <h2>DOM Button disabled Property</h2
          
        <!-- Assigning id to Button. -->
        <button id="GFG" disabled>
            Submit
        </button>
          
        <br><br
          
        <b>
            Click on "Try it " Button to 
            return the disabled Property
        </b
          
        <br><br>
          
        <button onclick="Geeks()">
            Try it
        </button>
          
        <p id="sudo" style="font-size:30px;color:green;"></p>
          
        <!-- script to return Button disabled Property value -->
        <script
            function Geeks() { 
                  
                // return Boolean value to represent Button
                var x = document.getElementById("GFG").disabled;
                document.getElementById("sudo").innerHTML = x;
            
        </script
    </body
      
    </html>                    

    chevron_right

    
    

    Output:
    Before Click on the Button:

    After Click on the Button:

    Supported Browsers: The browser supported by DOM Button disabled property are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari

    full-stack-img




    My Personal Notes arrow_drop_up
Recommended Articles
Page :