javascript - 标记一个元素时验证所需的复选框

Question

当您有一个 Bootstrap 复选框组并且需要要求用户标记至少一个框而不是全部时，可以做什么？

Bootstrap 验证(和浏览器)使用“必需”属性来检测它们，但当许多复选框在一组中彼此相关时，它显然不适用于此用例。

所以我想使用 JavaScript 来切换其他属性上的属性，但到目前为止我还没有成功。

<div class="checkbox-group">
  <div class="form-check form-checkbox">
    <input type="checkbox" class="form-check-input" id="choice-64" value="64" name="choice-19" required>
    <label class="form-check-label" for="choice-64"> Manzana</label>
  </div>

  <div class="form-check form-checkbox">
    <input type="checkbox" class="form-check-input" id="choice-65" value="65" name="choice-19" required>
    <label class="form-check-label" for="choice-65"> Sandía</label>
  </div>

  <div class="form-check form-checkbox">
    <input type="checkbox" class="form-check-input" id="choice-66" value="66" name="choice-19" required>
    <label class="form-check-label" for="choice-66"> Melón</label>
  </div>
</div>

我在 GitHub 上找到了这段代码，但效果不佳:

$('#myForm .checkbox-group').on('change', 'input[type="checkbox"]', function (e) {
  var $group = $(this)
  var $checkbox = $(e.target)
  $group.not($checkbox).attr('required', !$checkbox.attr('checked'))
})

Answer 1

以下代码将更改组内所有复选框的required 值，而不仅仅是更改的复选框。如果至少有一个复选框被选中，它将全部设置为false，否则设置为true。

$('#myForm .checkbox-group').on('change', 'input[type="checkbox"]', function (e) {
  var $checkbox = $(this)
  var $group = $checkbox.parents('.checkbox-group')
  var checkedItems = $('input[type="checkbox"]:checked').length
  $('input[type=checkbox]', $group).attr('required', checkedItems === 0)
})

如果您切换所有选项而不是跳过已更改的选项，则处理起来会更容易。 在这里试试:https://jsfiddle.net/buqrn7mt/