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
- true: It defines that the Button element is disabled.
- False: It is the default value. It defines that the Button is not disabled.
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Property Values:
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.
<!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>
|
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.
<!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>
|
Output:
Before Click on the Button:
After Click on the Button:
Supported Browsers: The browser supported by DOM Button disabled property are listed below: