选中“全部”复选框时禁用所有复选框(Disable All Checkboxes When 'All' CheckBoxes Is Selected)

我有一个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 & 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>

I have an asp.net weform and on one page i have 7 checkboxes, what i'm after is, if the first checkbox is selected, then the remaining 6 are disabled otherwise if a checkbox (2 - 6) is selected i want the first one to be disabled.

Also if the user selects 2 or more checkboxs from 2 - 6, then then first one should only be enabled once they are all unchecked.

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

最满意答案

$(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。

最后一种情况我不明白

例

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

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

});

If i understand you correctly ...

If click on First checkbox - other should be disabled. If click on any from 2-6 then First should be disabled.

Last case i don't understand

Example

Also, as i remember ASP.Net add some prefix to ID of its elements. To disable this you can add to your elements this part ClientIDMode="Static"

更多推荐