I have a bunch of checkboxes like this. If the "Check Me" checkbox is checked, all the other 3 checkboxes should be enabled, else they should be disabled. How can I do this using jQuery?
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9">Check Me
<input type="checkbox" name="chk9[120]">
<input type="checkbox" name="chk9[140]">
<input type="checkbox" name="chk9[150]">
</form>
This question is related to
jquery
Here's another sample using JQuery 1.10.2
$(".chkcc9").on('click', function() {
$(this)
.parents('table')
.find('.group1')
.prop('checked', $(this).is(':checked'));
});
$jQuery(function() {_x000D_
enable_cb();_x000D_
jQuery("#group1").click(enable_cb);_x000D_
});_x000D_
_x000D_
function enable_cb() {_x000D_
if (this.checked) {_x000D_
jQuery("input.group1").removeAttr("disabled");_x000D_
} else {_x000D_
jQuery("input.group1").attr("disabled", true);_x000D_
}_x000D_
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<form name="frmChkForm" id="frmChkForm">_x000D_
<input type="checkbox" name="chkcc9" id="group1">Check Me <br>_x000D_
<input type="checkbox" name="chk9[120]" class="group1"><br>_x000D_
<input type="checkbox" name="chk9[140]" class="group1"><br>_x000D_
<input type="checkbox" name="chk9[150]" class="group1"><br>_x000D_
</form>$(document).ready(function() {_x000D_
$('#InventoryMasterError').click(function(event) { //on click_x000D_
if (this.checked) { // check select status_x000D_
$('.checkerror').each(function() { //loop through each checkbox_x000D_
$('#selecctall').attr('disabled', 'disabled');_x000D_
});_x000D_
} else {_x000D_
$('.checkerror').each(function() { //loop through each checkbox_x000D_
$('#selecctall').removeAttr('disabled', 'disabled');_x000D_
});_x000D_
}_x000D_
});_x000D_
_x000D_
});_x000D_
_x000D_
$(document).ready(function() {_x000D_
$('#selecctall').click(function(event) { //on click_x000D_
if (this.checked) { // check select status_x000D_
$('.checkbox1').each(function() { //loop through each checkbox_x000D_
$('#InventoryMasterError').attr('disabled', 'disabled');_x000D_
});_x000D_
_x000D_
} else {_x000D_
$('.checkbox1').each(function() { //loop through each checkbox_x000D_
$('#InventoryMasterError').removeAttr('disabled', 'disabled');_x000D_
});_x000D_
}_x000D_
});_x000D_
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<input type="checkbox" id="selecctall" name="selecctall" value="All" />_x000D_
<input type="checkbox" name="data[InventoryMaster][error]" label="" value="error" id="InventoryMasterError" />_x000D_
<input type="checkbox" name="checkid[]" class="checkbox1" value="1" id="InventoryMasterId" />_x000D_
<input type="checkbox" name="checkid[]" class="checkbox1" value="2" id="InventoryMasterId" /><form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="chkAll">Check Me
<input type="checkbox" name="chk9[120]" class="chkGroup">
<input type="checkbox" name="chk9[140]" class="chkGroup">
<input type="checkbox" name="chk9[150]" class="chkGroup">
</form>
$("#chkAll").click(function() {
$(".chkGroup").attr("checked", this.checked);
});
With added functionality to ensure the check all checkbox gets checked/dechecked if all individual checkboxes are checked:
$(".chkGroup").click(function() {
$("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});
This is the most up-to-date solution.
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1" />Check Me
<input type="checkbox" name="chk9[120]" class="group1" />
<input type="checkbox" name="chk9[140]" class="group1" />
<input type="checkbox" name="chk9[150]" class="group1" />
</form>
$(function() {
enable_cb();
$("#group1").click(enable_cb);
});
function enable_cb() {
$("input.group1").prop("disabled", !this.checked);
}
Here is the usage details for .attr() and .prop().
Use the new .prop() function:
$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);
The .prop() function is not available, so you need to use .attr().
To disable the checkbox (by setting the value of the disabled attribute) do
$("input.group1").attr('disabled','disabled');
and for enabling (by removing the attribute entirely) do
$("input.group1").removeAttr('disabled');
If you're working with just one element, it will always be fastest to use DOMElement.disabled = true. The benefit to using the .prop() and .attr() functions is that they will operate on all matched elements.
// Assuming an event handler on a checkbox
if (this.disabled)
Source: Stackoverflow.com