Требуется проверка ввода и проверено не более 4 опций

Question

У меня есть список флажков, в которых пользователь может выбирать вкусы, но я не знаю, как заставить пользователя выбирать от 1 до максимум 4 вкусов, сделать 1 обязательным и 4 макс.

Если я поставлю обязательный для каждого из них, то потребуется каждый аромат, и мне нужно, чтобы пользователь мог проверить ЛЮБОЙ из ароматов.

¿Любая помощь о том, как этого добиться? Большое спасибо.

HTML

Сценарий

<script>
        function fillHidden(hiddenname) {
        var checkboxes = document.querySelectorAll('[hidden-data="'+hiddenname+'"]');
        var hiddenfield = document.getElementById(hiddenname);
        hiddenfield.value = ""
        var i;
        for (i = 0; i < checkboxes.length; i++) {
          var x = checkboxes[i];
          if(x.checked){
            if(hiddenfield.value==""){
              hiddenfield.value = x.value;
              }else{
              hiddenfield.value = hiddenfield.value + ", " + x.value; 
              } 
            }
          }
        }
      </script>

Answer 1

Это не полный ответ, так как я думаю, что вы бы отметили по крайней мере 1 обязательный флажок перед отправкой формы (что будет отдельной функцией). Я покрываю проблему максимум с 4, настраивая вашу функцию fillhidden() следующим образом:

  function fillHidden(hiddenname) {
     var checkboxes = document.querySelectorAll('[hidden-data="' + hiddenname + '"]');
     var hiddenfield = document.getElementById(hiddenname);
     hiddenfield.value = "";
     var i;
     for (i = 0; i < checkboxes.length; i++) {
       var x = checkboxes[i];
       if (x.checked) {
          if (hiddenfield.value == "") {
             hiddenfield.value = x.value;
          } else {
             hiddenfield.value = hiddenfield.value + ", " + x.value;
          }
       }
     }

     let selected = document.querySelectorAll("input[type='checkbox']:checked").length;
     let unselected = document.querySelectorAll("input[type='checkbox']:not(:checked)");
     if (selected == 4) {
       for (var i = 0; i < unselected.length; i++) {
          unselected[i].setAttribute("disabled", 'true');
       }
     } else {
        for (var i = 0; i < unselected.length; i++) {
          unselected[i].removeAttribute("disabled");
        }
     }
 }