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