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中给定的复选框之一。

所以我可以在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（）方法为未设置的属性返回undefined。要检索和更改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类上，然后在该事件内可以检查复选框是否为“空”。

$('.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>

jQuery防止未选中带有更改事件的最后一个复选框

2 个答案: