jQuery-复选框启用/禁用

234

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

jquery

— 杰克
source

413

略微更改您的标记：

$(function() {
  enable_cb();
  $("#group1").click(enable_cb);
});

function enable_cb() {
  if (this.checked) {
    $("input.group1").removeAttr("disabled");
  } else {
    $("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>

展开摘要

您可以使用属性选择器来执行此操作，而无需引入ID和类，但是它速度较慢且（imho）较难阅读。

— 克莱图斯
source

3

对于禁用的一部分，试试这个网址：jquery-howto.blogspot.com/2008/12/...

— 沃尔特Stoneburner

3

这与问题没有直接关系，但是在IE中，直到复选框失去焦点之前，更改事件才会触发。我通常会调用$(this).change第一个复选框的click事件。

— mcrumley'2

10

您可以使用.prop()代替.attr()。

— Reza Owliaei 2012年

5

我在使用.prop（）时遇到问题，它可以在初始设置上使用，但是如果我来回切换，则第二次它无法“禁用”该复选框。我坚持使用attr（）。

— ProVega

3

@ProVega 这可以解释您的问题。

— 安德鲁

100

这是最新的解决方案。

<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)

参考：使用jQuery将复选框设置为“选中”？

— 罗伊杜基
source

2

对于像我这样使用asp：CheckBox的用户，它将在浏览器中呈现为跨度内的输入。因此，就我而言，我不得不使用jQuery作为$（'。checkboxClassName input'）。prop（'disabled，false）...来访问它，并且尝试更改'enabled'对我也不起作用:)谢谢对于这个答案！

— deebs

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;
});

— 锌
source

1

这是另一个使用JQuery 1.10.2的示例

$(".chkcc9").on('click', function() {
            $(this)
            .parents('table')
            .find('.group1') 
            .prop('checked', $(this).is(':checked')); 
});

— 保罗·格瓦拉（Paolo Guevara）
source

1

$(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');
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" />

展开摘要

— 王子
source

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>

展开摘要

— 古凡奇·霍亚莫夫（Guvanch Hojamov）
source