Question

我已经创建了一个用户表单。用户获得10个选项，而他需要选择其中四个。每当我提交的表单中选中的复选框少于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>

Answer 1

在客户端进行验证并不重要，但它是很好的UX。我更喜欢在方便时使用[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>

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

1 个答案: