如何使用jquery防止取消选中所有复选框？

Question

我有自定义复选框：

<p>
    <input class="preventUncheck" id="toggle-on1" type="checkbox">
    <label for="toggle-on1">Selling</label>
</p>
<p>
    <input class="preventUncheck" id="toggle-on2" type="checkbox">           
    <label for="toggle-on2">Rent</label> 
</p>

<p>
    <input class="preventUncheck" id="toggle-on1" type="checkbox">
    <label for="toggle-on1">Selling</label>
</p>
<p>
    <input class="preventUncheck" id="toggle-on2" type="checkbox">           
    <label for="toggle-on2">Rent</label> 
</p>

我想阻止取消选中所有复选框，这意味着应始终选中一个复选框，如果用户尝试取消选中它，javascript 会阻止这样做。

我怎样才能完成这项工作？

Answer 1

您应该检查选中复选框的长度是否等于 0，然后防止取消选中它。

$('.preventUncheck').on('change', function(e) {
    if ($('.preventUncheck:checked').length == 0 && !this.checked)
    	this.checked = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <input type="checkbox" class="preventUncheck" id="toggle-on1">
  <label for="toggle-on1">Selling</label>
</p>
<p>
  <input type="checkbox" class="preventUncheck" id="toggle-on2">
  <label for="toggle-on2">Rent</label> 
</p>