我有一堆像这样的复选框。如果选中“选中我”复选框,则应启用所有其他3个复选框,否则应禁用它们。我怎么能用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>
答案 0 :(得分:380)
略微更改标记:
<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() {
if (this.checked) {
$("input.group1").removeAttr("disabled");
} else {
$("input.group1").attr("disabled", true);
}
}
您可以使用属性选择器执行此操作,而无需引入ID和类,但速度较慢且(imho)难以阅读。
答案 1 :(得分:94)
这是最新的解决方案。
<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);
}
以下是.attr()
和.prop()
的使用详情。
使用新的.prop()
功能:
$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);
.prop()
功能不可用,因此您需要使用.attr()
。
要禁用复选框(通过设置已禁用属性的值),请执行
$("input.group1").attr('disabled','disabled');
和启用(通过完全删除属性)执行
$("input.group1").removeAttr('disabled');
如果您只使用一个元素,使用DOMElement.disabled = true
将始终是最快的。使用.prop()
和.attr()
函数的好处是它们可以对所有匹配的元素进行操作。
// Assuming an event handler on a checkbox
if (this.disabled)
答案 2 :(得分:10)
<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);
});
添加了一些功能,以确保在选中所有单独的复选框后,选中/解除复选复选框:
$(".chkGroup").click(function() {
$("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});
答案 3 :(得分:1)
<input type="checkbox" id="selecctall" name="selecctall" value="All"/>
<input type="checkbox" name="data[InventoryMaster][error]" label="" value="error" id="InventoryMasterError" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="1" id="InventoryMasterId" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="2" id="InventoryMasterId" />
$(document).ready(function() {
$('#InventoryMasterError').click(function(event) { //on click
if(this.checked) { // check select status
$('.checkerror').each(function() { //loop through each checkbox
$('#selecctall').attr('disabled','disabled');
});
}else{
$('.checkerror').each(function() { //loop through each checkbox
$('#selecctall').removeAttr('disabled','disabled');
});
}
});
});
$(document).ready(function() {
$('#selecctall').click(function(event) { //on click
if(this.checked) { // check select status
$('.checkbox1').each(function() { //loop through each checkbox
$('#InventoryMasterError').attr('disabled','disabled');
});
}else{
$('.checkbox1').each(function() { //loop through each checkbox
$('#InventoryMasterError').removeAttr('disabled','disabled');
});
}
});
});
答案 4 :(得分:1)
这是使用JQuery 1.10.2的另一个示例
$(".chkcc9").on('click', function() {
$(this)
.parents('table')
.find('.group1')
.prop('checked', $(this).is(':checked'));
});
答案 5 :(得分:0)
$jQuery(function() {
enable_cb();
jQuery("#group1").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
jQuery("input.group1").removeAttr("disabled");
} else {
jQuery("input.group1").attr("disabled", true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1">Check Me <br>
<input type="checkbox" name="chk9[120]" class="group1"><br>
<input type="checkbox" name="chk9[140]" class="group1"><br>
<input type="checkbox" name="chk9[150]" class="group1"><br>
</form>