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 Checkbox disabled Property
The HTML DOM Input Checkbox disabled property sets or returns whether a checkbox input element is enabled or disabled. When a checkbox is disabled, it cannot be clicked or modified by the user and appears grayed out in the browser.
Syntax
Following is the syntax for returning the disabled state −
inputCheckboxObject.disabled
Following is the syntax for setting the disabled state −
inputCheckboxObject.disabled = booleanValue
Return Value
The disabled property returns a boolean value indicating whether the checkbox is disabled (true) or enabled (false).
Parameters
The booleanValue parameter can be one of the following −
| Value | Description |
|---|---|
true |
Disables the checkbox. The user cannot interact with it. |
false |
Enables the checkbox. This is the default value. |
Example − Enabling Disabled Checkboxes
Following example demonstrates how to enable multiple disabled checkboxes using the disabled property −
<!DOCTYPE html>
<html>
<head>
<title>Input Checkbox Disabled Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Subject Selection</h2>
<form>
<div style="margin-bottom: 15px;">
<label>Full Name: </label>
<input id="fullname" placeholder="eg: John Doe" type="text" name="fullname">
</div>
<div style="margin-bottom: 15px;">
<p>Select Subjects:</p>
<label><input class="subject" type="checkbox" value="Biology" name="subject" disabled> Biology</label><br>
<label><input class="subject" type="checkbox" value="Mathematics" name="subject" disabled> Mathematics</label><br>
<label><input class="subject" type="checkbox" value="Physics" name="subject" disabled> Physics</label><br>
<label><input class="subject" type="checkbox" value="Psychology" name="subject" disabled> Psychology</label>
</div>
</form>
<button onclick="enableCheckboxes()">Enable Subjects</button>
<button onclick="disableCheckboxes()">Disable Subjects</button>
<p id="status">All checkboxes are currently disabled.</p>
<script>
function enableCheckboxes() {
var checkboxes = document.getElementsByClassName("subject");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].disabled = false;
}
document.getElementById("status").textContent = "All checkboxes are now enabled.";
}
function disableCheckboxes() {
var checkboxes = document.getElementsByClassName("subject");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].disabled = true;
}
document.getElementById("status").textContent = "All checkboxes are now disabled.";
}
</script>
</body>
</html>
The output shows checkboxes that are initially disabled (grayed out) and become clickable after clicking "Enable Subjects" −
Student Subject Selection Full Name: [ ] Select Subjects: ? Biology (grayed out, disabled) ? Mathematics (grayed out, disabled) ? Physics (grayed out, disabled) ? Psychology (grayed out, disabled) [Enable Subjects] [Disable Subjects] All checkboxes are currently disabled. (After clicking Enable Subjects, checkboxes become clickable)
Example − Checking Disabled State
Following example shows how to check whether a checkbox is disabled and display its status −
<!DOCTYPE html>
<html>
<head>
<title>Check Disabled State</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Checkbox Status Checker</h2>
<label>
<input type="checkbox" id="myCheckbox" disabled>
Sample Checkbox
</label>
<br><br>
<button onclick="checkStatus()">Check Status</button>
<button onclick="toggleDisabled()">Toggle Disabled</button>
<p id="result"></p>
<script>
function checkStatus() {
var checkbox = document.getElementById("myCheckbox");
var isDisabled = checkbox.disabled;
var status = isDisabled ? "disabled" : "enabled";
document.getElementById("result").innerHTML = "The checkbox is currently <b>" + status + "</b>.";
}
function toggleDisabled() {
var checkbox = document.getElementById("myCheckbox");
checkbox.disabled = !checkbox.disabled;
checkStatus();
}
</script>
</body>
</html>
This example demonstrates reading the disabled property and toggling between enabled and disabled states −
Checkbox Status Checker ? Sample Checkbox (initially grayed out) [Check Status] [Toggle Disabled] (After clicking Check Status: "The checkbox is currently disabled.") (After clicking Toggle Disabled: checkbox becomes clickable and status shows "enabled")
Key Points
Following are the important points about the disabled property −
Disabled checkboxes cannot be clicked, checked, or modified by the user.
Disabled checkboxes are typically displayed with a grayed-out appearance.
The disabled property can be used to conditionally enable/disable form controls based on user actions.
Disabled form elements are not submitted when the form is sent to the server.
The property returns
trueif the checkbox is disabled,falseotherwise.
Conclusion
The HTML DOM Input Checkbox disabled property provides a way to programmatically control whether checkboxes can be interacted with by users. It returns a boolean value indicating the current disabled state and accepts boolean values to enable or disable the checkbox dynamically through JavaScript.
1K+ Views
