jQuery防止最后一个复选框被取消选中与更改事件

Question

>我有一系列复选框：

<form id="settingsForm">
<input class="form-check-input" type="checkbox" name="emailFrequency_daily">
<label>Daily</label> 
<input class="form-check-input" type="checkbox" name="emailFrequency_weekly">
<label>Weekly</label>
<input class="form-check-input" type="checkbox" name="emailFrequency_monthly">
<label>Monthly</label>
</form>

还有一个change事件，用于检查表单中的任何输入是否更改：

$("#settingsForm")
    .find("input")
    .change(function(){
});

这在检测更改方面有效。但是，我想这样做，以便用户必须选中上述 HTML 中给出的至少 1 个复选框。

所以我可以在change内进行测试，如下所示：

if ($('.form-check-input:checked').length == 0) {
    console.log('You must select at least 1 checkbox');
}

同样，这有效。但问题是它没有选中任何复选框。表单是通过 ajax 保存的，因此我不能禁用"提交"按钮或其他一些阻止用户进入此状态的 UI 元素。因此，我认为正确的方法是不允许用户取消选中该复选框，如果它是最后一个选中的复选框？

我必须在此处输入什么以确保单击的元素保持选中状态？我尝试做console.log(this)，它会输出我点击的元素的 HTML。

但是我不能定位它，例如 $(this).attr('checked', true);什么都不做？

jquery 3.2.1

Answer 1

这可能与您的原始代码相同，但使用 prop() 而不是 attr() 。

attr() - 从 jQuery 1.6 开始，.attr(( 方法为尚未设置的属性返回未定义。若要检索和更改 DOM 属性(如表单元素的选中、选定或禁用状态(，请使用 .prop(( 方法。

$('#settingsForm input').on('change', function() {
  var len = $('#settingsForm input:checked').length;
  if (len === 0) {
    $(this).prop('checked', true);
    console.log('You must select at least 1 checkbox');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="settingsForm">
  <input class="form-check-input" type="checkbox" name="emailFrequency_daily">
  <label>Daily</label>
  <input class="form-check-input" type="checkbox" name="emailFrequency_weekly">
  <label>Weekly</label>
  <input class="form-check-input" type="checkbox" name="emailFrequency_monthly">
  <label>Monthly</label>
</form>

Answer 2

您可以尝试在.form-check-input类上绑定 change 事件，并在该事件中检查复选框是否为"空"。

$('.form-check-input').on("change", function(){
  var noChecked = $('.form-check-input:checked').length;
  
  if(noChecked === 0){
    console.log("0 checkboxes are checked");
  } else {
    console.log("checkboxes ok", noChecked);
  }
});

<form id="settingsForm">
<input class="form-check-input" type="checkbox" name="emailFrequency_daily">
<label>Daily</label> 
<input class="form-check-input" type="checkbox" name="emailFrequency_weekly">
<label>Weekly</label>
<input class="form-check-input" type="checkbox" name="emailFrequency_monthly">
<label>Monthly</label>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>