当组中的一个复选框被选中时，禁用并取消选中所有其他复选框
[英]When one checkbox is checked in a group, disable & uncheck all other checkboxes
问题描述
So in the code below, 
因此，在下面的代码中，
function listen(element, event, callback) { if (element.attachEvent) { element.attachEvent('on' + event, callback); } else { element.addEventListener(event, callback); } } var form = document.querySelector('#myForm'); listen(form, 'click', function (event) { var checkBoxes, i, checked, target; target = event.srcElement || event.target; if (target.getAttribute('name') === 'check1') { checkBoxes = form.querySelectorAll('input[name="check2"]'); checked = target.checked; for (i = 0; i < checkBoxes.length; i++) { checkBoxes[i].disabled = checked && checkBoxes[i] !== target; } } });
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <form id="myForm"> <table> <tr> <td> <input type='checkbox' name='check1' value = '1'>Report 1 </td> <td> <input type='checkbox' name='check1' value = '2'>R1 Option 1 </td> <td> <input type='checkbox' name='check1' value = '3'>R1 Option 2 </td> <td> <input type='checkbox' name='check1' value = '4'>R1 Option 3 </td> </tr> <tr> <td> <input type='checkbox' name='check2' value = '5'>Report 2 </td> <td> <input type='checkbox' name='check2' value = '6'>R2 Option 1 </td> <td> <input type='checkbox' name='check2' value = '7'>R2 Option 2 </td> <td> <input type='checkbox' name='check2' value = '8'>R2 Option 3 </td> </tr> <tr> <td> <input type='checkbox' name='check3' value = '5'>Report 3 </td> <td> <input type='checkbox' name='check3' value = '6'>R3 Option 1 </td> <td> <input type='checkbox' name='check3' value = '7'>R3 Option 2 </td> <td> <input type='checkbox' name='check3' value = '8'>R3 Option 3 </td> </tr> </table> </form> </body> </html>
Report 1 is checked, Report 2 and Report 3 as well as all the options for Report 2 and Report 3 should be un-checked and not selectable. 检查报告1，报告2和报告3以及报告2和报告3的所有选项都应该是未检查的，不可选择。 I only want the user to be able to select one report at a time, with the options for that report only to be available for selection. 我只希望用户一次只能选择一个报告，而该报告的选项仅可供选择。 Any assistance is much appreciated. 非常感谢任何帮助。
Snippet:- 片段： -
2 个解决方案
解决方案1
0 2019-05-08 09:25:29
$(document).ready(function () { $('input[type="checkbox"]').click(function () { if ($(this).prop("checked") == true) { $('input').on('change', function () { $('input').not(this).attr('disabled', true); }); } else if ($(this).prop("checked") == false) { $('input').on('change', function () { $('input').not(this).attr('disabled', false); }); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <input type='checkbox' name='check1' value = '1'>Report 1 </td> <td> <input type='checkbox' name='check1' value = '2'>R1 Option 1 </td> <td> <input type='checkbox' name='check1' value = '3'>R1 Option 2 </td> <td> <input type='checkbox' name='check1' value = '4'>R1 Option 3 </td> </tr> <tr> <td> <input type='checkbox' name='check2' value = '5'>Report 2 </td> <td> <input type='checkbox' name='check2' value = '6'>R2 Option 1 </td> <td> <input type='checkbox' name='check2' value = '7'>R2 Option 2 </td> <td> <input type='checkbox' name='check2' value = '8'>R2 Option 3 </td> </tr> <tr> <td> <input type='checkbox' name='check3' value = '5'>Report 3 </td> <td> <input type='checkbox' name='check3' value = '6'>R3 Option 1 </td> <td> <input type='checkbox' name='check3' value = '7'>R3 Option 2 </td> <td> <input type='checkbox' name='check3' value = '8'>R3 Option 3 </td> </tr> </table>
解决方案2
0 2019-05-08 11:26:15
Here is a simple validation 这是一个简单的验证
$("#myForm").find("input[type='checkbox']").on("click", function(){ if ($(this).is(":checked")) { $("#myForm").find("input[type='checkbox']").not($(this)).prop("disabled", true) }else { $("#myForm").find("input[type='checkbox']").prop("disabled", false) } });
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <form id="myForm"> <table> <tr> <td> <input type='checkbox' name='check1' value = '1'>Report 1 </td> <td> <input type='checkbox' name='check1' value = '2'>R1 Option 1 </td> <td> <input type='checkbox' name='check1' value = '3'>R1 Option 2 </td> <td> <input type='checkbox' name='check1' value = '4'>R1 Option 3 </td> </tr> <tr> <td> <input type='checkbox' name='check2' value = '5'>Report 2 </td> <td> <input type='checkbox' name='check2' value = '6'>R2 Option 1 </td> <td> <input type='checkbox' name='check2' value = '7'>R2 Option 2 </td> <td> <input type='checkbox' name='check2' value = '8'>R2 Option 3 </td> </tr> <tr> <td> <input type='checkbox' name='check3' value = '5'>Report 3 </td> <td> <input type='checkbox' name='check3' value = '6'>R3 Option 1 </td> <td> <input type='checkbox' name='check3' value = '7'>R3 Option 2 </td> <td> <input type='checkbox' name='check3' value = '8'>R3 Option 3 </td> </tr> </table> </form> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如果勾选了一个复选框，如何取消选中所有复选框？ - How to uncheck all checkboxes, if one checkbox checked?
如果选中了“其他”复选框，则取消选中所有复选框并获取价值 - Uncheck all checkboxes if “Other” checkbox is checked and get value
当“ Any”复选框被选中无法使用时，取消选中组中的所有复选框 - Uncheck all checkboxes in a group when “Any” checkbox is checked used to work not working anymore
如果选中另一个复选框，如何取消选中一组复选框 - How to uncheck a group of checkboxes when another checkbox is checked
如果在数组中签入一个复选框，我如何禁用或取消选中所有复选框？ - How I disable or uncheck all checkboxes, if one checked in array?
如果选中了表格复选框，则取消选中其他表格复选框吗？ - If table checkbox is checked, uncheck other table checkboxes?
取消选中一个复选框，取消选中所有其他复选框，不起作用 - Uncheck one checkbox, unchecks all other checkboxes Not Working
如果选中其他复选框，则禁用复选框 - disable checkbox if other checkboxes is checked
除“全部”以外的其他选项时，如何取消选中复选框 - How to uncheck a checkbox when checked option is other than 'All'
在 next.js 中选中另一个时，取消选中输入复选框 - Uncheck input checkbox when one other is checked in next.js
相关标签