jQuery Селекторы или проблема «если»

Question

Этот код должен запрещать нажатие более двух радиокнопок (есть три группы таких кнопок).

Это работает, когда нет контейнера 'label' , но когда оно есть, оно не работает (похоже, что ', если конструкция не является работает; все, что написано вне его, работает нормально)

как заставить его работать без удаления метки? Есть ли какие-нибудь решения?

var radio_limit = 2;

$('.pricing-levels-3 label input').on('change', function(evt) {

   if($(this).siblings(':checked').length >= radio_limit) {
       this.checked = false;
   };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pricing-levels-3">
         <p><strong>Select 2 Levels</strong></p>
         <label>
           <input type="radio" name="vehicle" value="1">Level 1<br>
           <input type="radio" name="vehicle" value="2">Level 2<br>
           <input type="radio" name="vehicle" value="3">Level 3<br>
         </label>
         <label>
           <br>
           <input type="radio" name="vehicle2" value="1">Level 1<br>
           <input type="radio" name="vehicle2" value="2">Level 2<br>
           <input type="radio" name="vehicle2" value="3">Level 3<br>
         </label>
         <label>
           <br>
           <input type="radio" name="vehicle3" value="1">Level 1<br>
           <input type="radio" name="vehicle3" value="2">Level 2<br>
           <input type="radio" name="vehicle3" value="3">Level 3<br>
           <br>
         </label>
</div>

Answer 1

Вы ищете братьев и сестер, которые были без ярлыков. Теперь с ярлыками они не братья и сестры, они двоюродные братья. Чтобы исправить это, мы читаем все переключатели в одном и том же div, используя closest (). Также используйте опору, чтобы проверить переключатель. Сделайте это:

var radio_limit = 2;

$('.pricing-levels-3 label input').on('change', function(evt) {

   if($(this).closest('div').find('input:checked').length >= radio_limit) {
       $(this).prop('checked', false);
   };
});