JQuery застрял на 1 функции на основе ввода

Question

При выборе переключателя + количество флажков выдаст ошибку.1-й экземпляр - это кнопки 1 + 5, если вы щелкнете по 6-му блоку, он выдаст предупреждение.

2-я функция - это кнопки 2 + 10, но это просто выдаст ту же ошибку, что и кнопка 1, и остановит 10 полей.

Код, который я использую:

$("input[name='option[]']").on('change', function (e) {
    if ($("input[name='meals']").val() == 5 && $("input[name='option[]']:checked").length > 5)  {
        $(this).prop('checked', false);
        alert("allowed only 5");
    }
    else if ($("input[name='meals']").val() == 10 && $("input[name='option[]']:checked").length > 10)  {
        $(this).prop('checked', false);
        alert("allowed only 10");
    }
    else if ($("input[name='meals']").val() == 15 && $("input[name='option[]']:checked").length > 15)  {
        $(this).prop('checked', false);
        alert("allowed only 15");
    }
    else if ($("input[name='meals']").val() == 20 && $("input[name='option[]']:checked").length > 20)  {
        $(this).prop('checked', false);
        alert("allowed only 20");
    }
});

Любая помощь будет отличной!

Большое спасибо!

Answer 1

Основная проблема в том, что вы выбираете все элементы input[name='meals'], а не тот, который отмечен. Из-за этого val() читается только с первого элемента в коллекции, который всегда 5.

Чтобы это исправить, вам нужно использовать селектор :checked, чтобы получить выбранное число meals. Вы также можете высушить логику, используя это значение в условии if. Примерно так:

$("input[name='option[]']").on('change', function(e) {
  var maxAllowed = parseInt($("input[name='meals']:checked").val(), 10);

  if ($("input[name='option[]']:checked").length > maxAllowed) {
    $(this).prop('checked', false);
    alert("allowed only " + maxAllowed);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
  <input type="radio" name="meals" value="5" checked="true" /> 5
</label><label>
  <input type="radio" name="meals" value="10" /> 10
</label><label>
  <input type="radio" name="meals" value="15" /> 15
</label><label>
  <input type="radio" name="meals" value="20" /> 20
</label><br /><br /><br />

<div>
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" /><br />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" /><br />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" /><br />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
</div>