当一个选项（复选框）打开时，是否可以单击多个复选框，而当它关闭时，您一次只能选择一个？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当一个选项（复选框）打开时，是否可以单击多个复选框，而当它关闭时，您一次只能选择一个？相关的知识，希望对你有一定的参考价值。
我希望能够执行上图中的功能。但是，它不会工作。
$("#customSwitches").click(function()
var $this = $(this);
if ($this.data('clicked'))
alert("not element clicked");
$this.data('clicked', false);
$(document).on('click', "#radio1, #radio2, #radio3, #radio4").not(this).prop('checked', false);
);
else
alert("element clicked");
$this.data('clicked', true);
);
答案
您当前的代码有一些语法问题，并使用嵌套的事件处理程序，这不是一个好的设计模式。基本而言，您正在尝试根据第一个复选框状态构建动态复选框限制器。为此，只需确定是否选中了第一个框，然后计算选中区域的数量即可查看其是否超出限制。如果是这样，则禁止选中当前框。试试这个：
let $allowMulti = $('#allow_multi').on('change', function()
if (!this.checked)
$('.region').prop('checked', false); // remove all checks if no multi allowed
);
$('.region').on('change', function()
let selectedCount = $('.region:checked').length;
if (!$allowMulti.prop('checked') && selectedCount > 1)
$(this).prop('checked', false);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<label>
<input type="checkbox" id="allow_multi">
Select multiple regions
</label>
</p>
<label>
<input type="checkbox" class="region" value="1"> 1
</label>
<label>
<input type="checkbox" class="region" value="2"> 2
</label>
<label>
<input type="checkbox" class="region" value="3"> 3
</label>
<label>
<input type="checkbox" class="region" value="4"> 4
</label>另一答案
您可以尝试以下方式： $(".vehicle").click(function(e)
if($('#customSwitches').is(':not(:checked)'))
if($('.vehicle:checked').length > 1)
alert('You can not check multiple');
e.preventDefault();
);
$("#customSwitches").click(function(e)
$(".vehicle").prop('checked', false);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="customSwitches"> Select Multiple</label><input type="checkbox" id="customSwitches">
<hr/>
<input class="vehicle" type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>
<input class="vehicle" type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>
<input class="vehicle" type="checkbox" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>以上是关于当一个选项（复选框）打开时，是否可以单击多个复选框，而当它关闭时，您一次只能选择一个？的主要内容，如果未能解决你的问题，请参考以下文章