jquery - 需要从组中选中 4 个复选框

Question

我创建了一个用户表单。用户有 10 个选项，他需要从中选择 4 个。每当我提交表单时选择了少于 4 个复选框，然后选择另一个，验证消息将出现，除非我选择并取消选择所有未选中的复选框。

$(document).ready(function() {
  $("input[name^='opties']").change(function() {
    if ($("input[name^='opties']:checked").length < 4) {
      $("input[name^='opties']").prop('required', true);
    } else {
      $("input[name^='opties']").removeAttr('required');
    }
  });
});

<input type="checkbox" name="opties[<?echo $cell?>]" oninvalid="setCustomValidity('Voer minstens 4 opties in')" oninput="setCustomValidity('')" required>

标签： jqueryforms

Answer 1

客户端的验证并不重要，但它是很好的用户体验。我更喜欢[required]在方便时使用，但看起来这种情况太令人头疼了。尝试禁用提交按钮，直到选中 4 个复选框并通知用户还需要多少选项。检查4个或更多时，启用提交按钮并通知用户他们可以提交表格。

$(':checkbox').on("change", chx);

function chx(e) {
  var checked = $(':checkbox:checked').length;
  var remaining = 4 - checked;
  var message, send;
  if (remaining <= 0) {
    message = `Submit Options When Done`;
    send = false;
  } else {
    message = `Pick <b>${remaining}</b> or More Options`;
    send = true;
  }
  $('.chxMsg').html(message);
  $(':submit').prop('disabled', send);
}

.chxMsg b {
  color: red
}

<form id="form">
  <fieldset class='chxGrp'>
    <legend class='chxMsg'>Pick <b>4</b> or More Options</legend>
    <input name='opt' type='checkbox' value='0'>
    <input name='opt' type='checkbox' value='1'>
    <input name='opt' type='checkbox' value='2'>
    <input name='opt' type='checkbox' value='3'>
    <input name='opt' type='checkbox' value='4'>
    <input name='opt' type='checkbox' value='5'>
    <input name='opt' type='checkbox' value='6'>
    <input name='opt' type='checkbox' value='7'>
    <input name='opt' type='checkbox' value='8'>
    <input name='opt' type='checkbox' value='9'>
    <input type='submit' disabled>
  </fieldset>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>