Skip to content
Related Articles

Related Articles

How to disable button element dynamically using JavaScript ?
  • Last Updated : 25 Dec, 2020
GeeksforGeeks - Summer Carnival Banner

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 set the button disabled property.

buttonObject.disabled = "value"

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:



HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to disable button element
        dynamically using JavaScript?
    </title>
</head>
  
<body style="text-align:center">
  
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h2>
        How to disable button element<br>
        dynamically using JavaScript?
    </h2>
  
    <!-- Assigning id to Button. -->
    <button id="GFG" onclick="Geeks()">
        Submit
    </button>
  
    <br><br>
  
    <p id="sudo"></p>
  
    <script>
        function Geeks() {
  
            document.getElementById("GFG")
                .disabled = "true";
  
            document.getElementById("sudo")
                .innerHTML = "Button is Disabled";
        
    </script>
</body>
  
</html>

Output:

Before Click the Button:

After Click 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 :