How to disable button element dynamically using JavaScript ?
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
