选择“所有”复选框时禁用所有复选框

Question

我有一个 asp.net weform，在一个页面上我有 7 个复选框，我所追求的是，​​如果第一个复选框被选中，则其余 6 个被禁用，否则如果选中一个复选框 (2 - 6)我想禁用第一个。

此外，如果用户从 2 到 6 中选择了 2 个或更多复选框，那么只有在它们都未选中时才应启用第一个。

HTML

<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">All services</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02AllServices" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Site content uploading only</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02ContentUploading" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Site content &amp; layout checking</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02ContentLayoutChecking" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Testing on various browsers</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02TestingVariousBrowsers" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Testing all website functionality</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02TestingFunctionality" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Responsive design layouting only</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02ResponsiveLayouting" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Responsive design layout testing</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02ResponsiveTesting" runat="server" />
     </div>
</div>

Answer 1

$(document).on('click', ':checkbox', function(){
    $(":checkbox:not('#Step02AllServices')").attr('disabled', $('#Step02AllServices').is(':checked')); //disabled checkBoxes if 1st is checked
    $("#Step02AllServices").attr('disabled', $(":checkbox:not('#Step02AllServices')").is(':checked'));//disabled 1st checkBoxe if any except 1st is checked

});

如果我理解正确的话......

• 如果点击第一个复选框 - 其他应该被禁用。
• 如果单击 2-6 中的任何一个，则应禁用 First。

最后一个我不明白的情况

Example

---

另外，我记得 ASP.Net 为其元素的 ID 添加了一些前缀。要禁用此功能，您可以将此部分添加到您的元素中 ClientIDMode="Static"

Answer 2

给他们所有相同的类，如“复选框”或其他东西。然后在文档中准备好：

 $("#AllClear").on("click", function() {
    $(".checkbox").attr("checked", false);
  }