ограничить выбор (флажок) с помощью радиокнопки

Question

Я объясню свою проблему, которую не могу решить.

Есть 4 переключателя и много флажков.

1. Если я выберу radiobutton1, я могу выбрать максимум 2 флажка
2. Если я выбираю radiobutton2, я могу выбрать 3 флажка макс.
3. Если я выбираю radiobutton3, я могу выбрать 4 флажка макс.
4. Если я выбираю radiobutton4, я могу выбрать 4 флажка макс.

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

Вы можете помочь я?

большое спасибо заранее

это мой код

<label class="label-space">350 g <span class="inner-light-title-radio">-  2 Gusti  (3 persone)</span>
                      <input type="radio" name="peso" id="radio1">
                      <span class="radiocustom"></span>
                    </label>
                    <label class="label-space">500 g <span class="inner-light-title-radio">-  3 Gusti  (4 persone)</span>
                      <input type="radio" name="peso" id="radio2">
                      <span class="radiocustom"></span>
                    </label>
                    <label class="label-space">750 g <span class="inner-light-title-radio">-  4 Gusti  (6 persone)</span>
                      <input type="radio" name="peso">
                      <span class="radiocustom"></span>
                    </label>
                    <label class="label-space">1000 g <span class="inner-light-title-radio">-  4 Gusti  (8 persone)</span>
                      <input type="radio" name="peso">
                      <span class="radiocustom"></span>
                    </label>

<div class="lista-gusti">
                        <label class="label-space-check">Fiordilatte
                          <span class="inner-light-title-check">Allergeni: Latte e derivati</span>
                          <input type="checkbox" name="gusti" class="gusto">
                          <span class="checkcustom"></span>
                        </label>

                        <label class="label-space-check">Stracciatella
                          <span class="inner-light-title-check">Allergeni: Latte e derivati</span>
                          <input type="checkbox" name="gusti" class="gusto">
                          <span class="checkcustom"></span>
                        </label>

                        <label class="label-space-check">Biscottino
                          <span class="inner-light-title-check">Allergeni: Frutta a guscio, Latte e derivati</span>
                          <input type="checkbox" name="gusti"  class="gusto">
                          <span class="checkcustom"></span>
                        </label>

                        <label class="label-space-check">Crema
                          <span class="inner-light-title-check">Allergeni: Latte e derivati, Uova e derivati</span>
                          <input type="checkbox" name="gusti" class="gusto">
                          <span class="checkcustom"></span>
                        </label>

                        <label class="label-space-check">Nocciola
                          <span class="inner-light-title-check">Allergeni: Frutta a guscio, Latte e derivati</span>
                          <input type="checkbox" name="gusti" class="gusto">
                          <span class="checkcustom"></span>
                        </label>

                        <label class="label-space-check">Pistacchio
                          <span class="inner-light-title-check">Allergeni: Frutta a guscio, Latte e derivati</span>
                          <input type="checkbox" name="gusti"  class="gusto">
                          <span class="checkcustom"></span>
                        </label>

                        <label class="label-space-check">Cioccolato al latte
                          <span class="inner-light-title-check">Allergeni: Latte e derivati</span>
                          <input type="checkbox" name="gusti"  class="gusto">
                          <span class="checkcustom"></span>
                        </label>

                        <label class="label-space-check">Cioccolato fondente
                          <span class="inner-light-title-check">Allergeni: Latte e derivati</span>
                          <input type="checkbox" name="gusti"  class="gusto">
                          <span class="checkcustom"></span>
                        </label>

                        <label class="label-space-check">Cioccolato del dottore
                          <span class="inner-light-title-check">Allergeni: Frutta a guscio, Latte e derivati</span>
                          <input type="checkbox" name="gusti"  class="gusto">
                          <span class="checkcustom"></span>
                        </label>

                        <label class="label-space-check">Ricotta fichi e noci
                          <span class="inner-light-title-check">Allergeni: Frutta a guscio, Latte e derivati</span>
                          <input type="checkbox" name="gusti"  class="gusto">
                          <span class="checkcustom"></span>
                        </label>

                        <label class="label-space-check">Stelle e strisce
                          <span class="inner-light-title-check">Allergeni: Arichidi, Latte e derivati</span>
                          <input type="checkbox" name="gusti"  class="gusto">
                          <span class="checkcustom"></span>
                        </label>

                        <label class="label-space-check">Limone
                          <span class="inner-light-title-check">Allergeni: -</span>
                          <input type="checkbox" name="gusti"  class="gusto">
                          <span class="checkcustom"></span>
                        </label>  
                    </div>

я использую это jquery но не работает:

$('#radio1').on('change', function() {
                    $('input[name=gusti]').prop('checked', false);
                    $('input[name=gusti]').on('change', function (e) {
                        if ($('input.gusto:checked').length > 3) {
                            $(this).prop('checked', false);
                            alert("allowed only 3");
                        }
                    });
                });


                $('#radio2').on('change', function() {
                    $('input[name=gusti]').prop('checked', false);
                    $('input[name=gusti]').on('change', function (e) {
                        if ($('input.gusto:checked').length > 5) {
                            $(this).prop('checked', false);
                            alert("allowed only 5");
                        }
                    });
                });

Answer 1

Вы можете сделать это так: добавьте атрибут data-max к переключателям, чтобы сохранить там максимальные значения для флажков и считайте их в единой функции change() для всех переключателей для эффективности. Используйте off() для удаления событий change(), установленных для флажков в предыдущих вызовах.

$('input[type="radio"]').on('change', function() {
  var max = $(this).attr("data-max");
  $('input[name=gusti]').off();
  $('input[name=gusti]').prop('checked', false);
  $('input[name=gusti]').on('change', function(e) {
    if ($('input.gusto:checked').length > max) {
      $(this).prop('checked', false);
      alert("allowed only " + max);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="label-space">350 g <span class="inner-light-title-radio">- 2 Gusti (3 persone)</span>
  <input type="radio" name="peso" data-max="3" id="radio1">
  <span class="radiocustom"></span>
</label>
<label class="label-space">500 g <span class="inner-light-title-radio">- 3 Gusti (4 persone)</span>
  <input type="radio" name="peso" data-max="4" id="radio2">
  <span class="radiocustom"></span>
</label>
<label class="label-space">750 g <span class="inner-light-title-radio">- 4 Gusti (6 persone)</span>
  <input type="radio" name="peso" data-max="6" id="radio3">
  <span class="radiocustom"></span>
</label>
<label class="label-space">1000 g <span class="inner-light-title-radio">- 4 Gusti (8 persone)</span>
  <input type="radio" name="peso" data-max="8" id="radio4">
  <span class="radiocustom"></span>
</label>

<div class="lista-gusti">
  <label class="label-space-check">Fiordilatte
    <span class="inner-light-title-check">Allergeni: Latte e derivati</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>

  <label class="label-space-check">Stracciatella
    <span class="inner-light-title-check">Allergeni: Latte e derivati</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>

  <label class="label-space-check">Biscottino
    <span class="inner-light-title-check">Allergeni: Frutta a guscio, Latte e derivati</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>

  <label class="label-space-check">Crema
    <span class="inner-light-title-check">Allergeni: Latte e derivati, Uova e derivati</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>

  <label class="label-space-check">Nocciola
    <span class="inner-light-title-check">Allergeni: Frutta a guscio, Latte e derivati</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>

  <label class="label-space-check">Pistacchio
    <span class="inner-light-title-check">Allergeni: Frutta a guscio, Latte e derivati</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>

  <label class="label-space-check">Cioccolato al latte
    <span class="inner-light-title-check">Allergeni: Latte e derivati</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>

  <label class="label-space-check">Cioccolato fondente
    <span class="inner-light-title-check">Allergeni: Latte e derivati</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>

  <label class="label-space-check">Cioccolato del dottore
    <span class="inner-light-title-check">Allergeni: Frutta a guscio, Latte e derivati</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>

  <label class="label-space-check">Ricotta fichi e noci
    <span class="inner-light-title-check">Allergeni: Frutta a guscio, Latte e derivati</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>

  <label class="label-space-check">Stelle e strisce
    <span class="inner-light-title-check">Allergeni: Arichidi, Latte e derivati</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>

  <label class="label-space-check">Limone
    <span class="inner-light-title-check">Allergeni: -</span>
    <input type="checkbox" name="gusti" class="gusto">
    <span class="checkcustom"></span>
  </label>
</div>