jQuery - 复选框启用/禁用

时间:2010-02-24 22:41:31

标签: jquery

我有一堆像这样的复选框。如果选中“选中我”复选框,则应启用所有其他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>

6 个答案:

答案 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()的使用详情。

jQuery 1.6 +

使用新的.prop()功能:

$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);

jQuery 1.5及以下

.prop()功能不可用,因此您需要使用.attr()

要禁用复选框(通过设置已禁用属性的值),请执行

$("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)

参考:Setting "checked" for a checkbox with jQuery?

答案 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>