jQuery – checkbox启用/禁用
我有一堆这样的checkbox。 如果选中“检查我”checkbox，则应启用所有其他3个checkbox，否则应禁用它们。 我怎样才能做到这一点使用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> 稍微改变你的标记：
<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); } }
你可以使用属性select器来做到这一点，而不需要引入ID和类，但是速度较慢并且（imho）难以阅读。
这是最新的解决scheme。
<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()的使用细节。
jQuery 1.6+
使用新的.prop()函数：
$("input.group1").prop("disabled", true); $("input.group1").prop("disabled", false);
jQuery 1.5及以下
.prop()函数不可用，所以您需要使用.attr() 。
要禁用checkbox（通过设置禁用属性的值），请执行此操作
$("input.group1").attr('disabled','disabled');
并为了启用（通过完全删除属性）做
$("input.group1").removeAttr('disabled');
任何版本的jQuery
如果您只使用一个元素，则使用DOMElement.disabled = true将始终最快。 使用.prop()和.attr()函数的好处是，它们将对所有匹配的元素进行操作。
// Assuming an event handler on a checkbox if (this.disabled)
ref： 设置“checked”与jQuerycheckbox？
<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); });
添加的function，以确保检查所有checkbox得到检查/ dechecked如果所有个人checkbox被选中：
$(".chkGroup").click(function() { $("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length; });
<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'); }); } }); });
