Требуется установить 4 флажка в группе

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>