Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Button disabled Property
The HTML DOM Input Button disabled property returns and modifies the value of the disabled attribute of an input button element. When set to true, the button becomes non-interactive and appears grayed out. When set to false, the button is enabled and can be clicked.
Syntax
Following is the syntax for returning the disabled property −
object.disabled
Following is the syntax for setting the disabled property −
object.disabled = true|false
Property Values
The disabled property accepts the following boolean values −
true − Disables the button, making it non-clickable and grayed out.
false − Enables the button, making it clickable and interactive (default state).
Return Value
The property returns a boolean value indicating whether the button is disabled (true) or enabled (false).
Example − Disabling a Button
Following example demonstrates how to disable a button when clicked −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM disabled Property</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Button Disabled Property Example</h2>
<input type="button" id="myButton" onclick="disableMe()" value="Click me to Disable me" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">
<p id="message" style="font-weight: bold; color: #28a745; margin-top: 20px;"></p>
<script>
function disableMe() {
var btn = document.getElementById("myButton");
btn.disabled = true;
document.getElementById("message").innerHTML = "Button is now disabled!";
}
</script>
</body>
</html>
Initially, the button is enabled and can be clicked. After clicking, the button becomes disabled and shows a confirmation message −
Click me to Disable me [Button becomes grayed out after click] Button is now disabled!
Example − Toggle Button Enable/Disable
Following example shows how to toggle between enabling and disabling a button −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Button Disabled State</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Toggle Button State</h2>
<input type="button" id="targetButton" value="Target Button" style="padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; margin: 10px;">
<br>
<input type="button" onclick="toggleButton()" value="Toggle Enable/Disable" style="padding: 8px 16px; background-color: #ffc107; color: black; border: none; border-radius: 5px;">
<p id="status" style="font-weight: bold; margin-top: 15px;">Status: Enabled</p>
<script>
function toggleButton() {
var btn = document.getElementById("targetButton");
var statusMsg = document.getElementById("status");
if (btn.disabled) {
btn.disabled = false;
statusMsg.innerHTML = "Status: Enabled";
statusMsg.style.color = "#28a745";
} else {
btn.disabled = true;
statusMsg.innerHTML = "Status: Disabled";
statusMsg.style.color = "#dc3545";
}
}
</script>
</body>
</html>
Clicking the toggle button alternately enables and disables the target button, with status updates −
Target Button [Toggle Enable/Disable] Status: Enabled (changes to "Status: Disabled" when toggled)
Example − Checking Button State
Following example demonstrates how to check if a button is disabled −
<!DOCTYPE html>
<html>
<head>
<title>Check Button Disabled State</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Button State Example</h2>
<input type="button" id="testButton" value="Test Button" disabled style="padding: 10px 20px; margin: 10px;">
<input type="button" onclick="checkState()" value="Check Button State" style="padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 5px;">
<input type="button" onclick="enableButton()" value="Enable Button" style="padding: 8px 16px; background-color: #28a745; color: white; border: none; border-radius: 5px; margin-left: 10px;">
<p id="result" style="margin-top: 15px; font-weight: bold;"></p>
<script>
function checkState() {
var btn = document.getElementById("testButton");
var result = document.getElementById("result");
if (btn.disabled) {
result.innerHTML = "The button is currently DISABLED";
result.style.color = "#dc3545";
} else {
result.innerHTML = "The button is currently ENABLED";
result.style.color = "#28a745";
}
}
function enableButton() {
document.getElementById("testButton").disabled = false;
}
</script>
</body>
</html>
The example shows how to programmatically check the disabled state of a button and display the result −
Test Button (grayed out) [Check Button State] [Enable Button] The button is currently DISABLED
Browser Compatibility
The disabled property is supported by all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the standard DOM specification and works consistently across all platforms.
Conclusion
The HTML DOM Input Button disabled property provides a simple way to control button interactivity. Setting it to true disables the button, while false enables it. This property is essential for creating dynamic user interfaces where button states change based on user actions or form validation.
232 Views
