如何防止使用 jquery 取消选中所有复选框?
How to prevent unchecking all checkboxes using jquery?
我有自定义复选框:
<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>
$(function() {
//prevent to uncheck all checkboxes
$('.preventUncheck').on('change', function() {
$('.preventUncheck').length == 0
&& !this.checked
&& $(this).prop('checked', true);
});
});
我想阻止取消选中所有复选框,这意味着应该始终选中一个复选框,如果用户尝试取消选中它,javascript 阻止这样做。
我该如何完成这项工作?
将属性 "disabled" 添加到复选框?
您应该检查选中复选框的长度是否等于 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>
我有自定义复选框:
<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>
$(function() {
//prevent to uncheck all checkboxes
$('.preventUncheck').on('change', function() {
$('.preventUncheck').length == 0
&& !this.checked
&& $(this).prop('checked', true);
});
});
我想阻止取消选中所有复选框,这意味着应该始终选中一个复选框,如果用户尝试取消选中它,javascript 阻止这样做。
我该如何完成这项工作?
将属性 "disabled" 添加到复选框?
您应该检查选中复选框的长度是否等于 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>