Можно ли щелкнуть несколько флажков, когда опция (флажок) включена, а когда она выключена, вы можете выбрать только одну?

Question

Я хочу иметь возможность выполнять функции на картинке выше. Однако это не сработает.

$("#customSwitches").click(function() {
  var $this = $(this);
  if ($this.data('clicked')) {
    alert("not element clicked");
    $this.data('clicked', false);
    $(document).on('click', "#radio1, #radio2, #radio3, #radio4").not(this).prop('checked', false);
    });
  } else {
    alert("element clicked");
    $this.data('clicked', true);
  }
});

Answer 1

При каждом щелчке по флажку из групп вы можете проверять свойство checked #customSwitches. Если этот флажок не установлен, вы можете посчитать длину checked флажков в группе, если он превышает 1, вы можете предотвратить событие по умолчанию.

При нажатии #customSwitches вы можете сбросьте все флажки из группы.

Вы можете попробовать следующий способ:

$(".vehicle").click(function(e){
    if($('#customSwitches').is(':not(:checked)')){
      if($('.vehicle:checked').length > 1){
        alert('You can not check multiple');
        e.preventDefault();
      }
    }
});

$("#customSwitches").click(function(e){
   $(".vehicle").prop('checked', false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="customSwitches"> Select Multiple</label><input type="checkbox" id="customSwitches">
<hr/>

<input class="vehicle" type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>
<input class="vehicle" type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>
<input class="vehicle" type="checkbox" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>

Answer 2

Ваш текущий код имеет некоторые синтаксические проблемы и использует вложенные обработчики событий, что не является хорошим шаблоном проектирования.

В терминах c вы пытаетесь построить динамический ограничитель c checkbox на основе первый флажок состояния. Для этого просто определите, установлен ли первый флажок, а затем подсчитайте количество отмеченных регионов, чтобы увидеть, превышает ли оно ограничение. Если это так, запретите текущее поле для проверки. Попробуйте это:

let $allowMulti = $('#allow_multi').on('change', function() {
  if (!this.checked)
    $('.region').prop('checked', false); // remove all checks if no multi allowed
});

$('.region').on('change', function() {
  let selectedCount = $('.region:checked').length;
  if (!$allowMulti.prop('checked') && selectedCount > 1)
    $(this).prop('checked', false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <label>
    <input type="checkbox" id="allow_multi"> 
    Select multiple regions
  </label>
</p>
<label>
  <input type="checkbox" class="region" value="1"> 1
</label>
<label>
  <input type="checkbox" class="region" value="2"> 2
</label>
<label>
  <input type="checkbox" class="region" value="3"> 3
</label>
<label>
  <input type="checkbox" class="region" value="4"> 4
</label>