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
How to disable/ enable checkbox with jQuery?
To disable and enable checkboxes, use the attr() method or prop() method in jQuery. The disabled attribute prevents users from interacting with the checkbox, making it unclickable and visually grayed out.
Using the attr() Method
Initially set the input type checkbox and disable it −
<input type="checkbox" id="sName" name="Male" value="male" disabled="disabled"/> Male
Now on the click of a button, toggle between disabled and enabled checkbox −
$("#button1").click(function() {
$("#sName").attr('disabled', !$("#sName").attr('disabled'));
});
Example
The following example demonstrates how to toggle checkbox state using the attr() approach rewritten in vanilla JavaScript (since jQuery CDN is not available in the inline compiler) ?
<!DOCTYPE html>
<html>
<head>
<title>Disable/Enable Checkbox with attr()</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
input[type="checkbox"] { width: 20px; height: 20px; margin-right: 8px; }
button { margin-top: 15px; padding: 8px 16px; }
#status { margin-top: 10px; font-weight: bold; }
</style>
</head>
<body>
<label>
<input type="checkbox" id="sName" name="Male"
value="male" disabled="disabled"/>
Male
</label>
<br><br>
<button type="button" id="button1">Toggle Checkbox</button>
<div id="status">Status: Disabled</div>
<script>
// Equivalent to jQuery: $("#sName").attr('disabled', !...)
document.getElementById('button1').addEventListener('click', function() {
var cb = document.getElementById('sName');
if (cb.hasAttribute('disabled')) {
cb.removeAttribute('disabled');
document.getElementById('status').textContent = 'Status: Enabled';
} else {
cb.setAttribute('disabled', 'disabled');
document.getElementById('status').textContent = 'Status: Disabled';
}
});
</script>
</body>
</html>
Clicking the button toggles the checkbox between disabled and enabled states. The status text updates to reflect the current state.
Using the prop() Method (Recommended)
You can also use the prop() method which is preferred for boolean properties like disabled, checked, or selected −
$("#toggleBtn").click(function() {
var isDisabled = $("#myCheckbox").prop('disabled');
$("#myCheckbox").prop('disabled', !isDisabled);
});
Example
The following example uses the DOM disabled property (equivalent to jQuery's prop() method) ?
<!DOCTYPE html>
<html>
<head>
<title>Disable/Enable Checkbox with prop()</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
input[type="checkbox"] { width: 20px; height: 20px; margin-right: 8px; }
button { margin-top: 15px; padding: 8px 16px; }
#status { margin-top: 10px; font-weight: bold; }
</style>
</head>
<body>
<label>
<input type="checkbox" id="myCheckbox" name="option"
value="yes" disabled/>
Enable notifications
</label>
<br><br>
<button type="button" id="toggleBtn">Toggle Checkbox</button>
<div id="status">Status: Disabled</div>
<script>
// Equivalent to jQuery: $("#myCheckbox").prop('disabled', !val)
document.getElementById('toggleBtn').addEventListener('click', function() {
var cb = document.getElementById('myCheckbox');
cb.disabled = !cb.disabled;
document.getElementById('status').textContent =
'Status: ' + (cb.disabled ? 'Disabled' : 'Enabled');
});
</script>
</body>
</html>
The cb.disabled = !cb.disabled line directly toggles the boolean property, which is the vanilla JavaScript equivalent of jQuery's prop('disabled', !val).
Key Differences Between attr() and prop()
| Method | Best for | Performance | Recommended |
|---|---|---|---|
| attr() | HTML attributes (href, src, class) | Slower | For string attributes |
| prop() | Boolean properties (disabled, checked) | Faster | For boolean properties |
Conclusion
Using jQuery's attr() or prop() method, you can easily toggle the disabled state of checkboxes. The prop() method is generally recommended for boolean properties like disabled as it provides better performance and more reliable behavior.
7K+ Views
