JQuery: Переключить два переключателя, нажав только один из них

Question

Как я могу переключить проверенное состояние двух переключателей, нажав только один из них?

Пожалуйста, ознакомьтесь с приведенным ниже примером.

.option{ 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none;  
 
    -ms-user-select: none;  
 
    user-select: none;  
 
} 
 

 
.option-checkbox-1{ 
 
    opacity: 0.7; 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="option option-checkbox-1"> 
 
<input type="radio" id="radio1" name="group[1]" value="1" checked="checked"> 
 
Radio 1 
 
</label> 
 
<label class="option option-checkbox-2"> 
 
<input type="radio" id="radio2" name="group[1]" value="2"> 
 
Radio 2 
 
</label>

Answer 1

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

Способ обойти это для переключения class назад и вперед, а затем обновить состояние переключателя, только когда-либо ссылаясь на class.

Вот этот простой подход с использованием JQuery и нативный JavaScript:

JQuery:

$(document).ready(function(){ 
 
    $('input[type="radio"]').click(function(){ 
 
     $('input[type="radio"]').each(function(){ 
 
      $(this).toggleClass('checked'); 
 
      $(this).hasClass('checked') ? $(this).prop('checked', true) : $(this).prop('checked', false); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
<input type="radio" class="checked" checked /> Radio A 
 
<input type="radio" /> Radio B 
 
</form>

---

Javascript:

var radioButtons = document.querySelectorAll('input[type="radio"]'); 
 

 
function toggleCheck() { 
 
    radioButtons.forEach(function(radioButton){ 
 
     radioButton.classList.toggle('checked'); 
 
     radioButton.classList.contains('checked') ? radioButton.checked = true : radioButton.checked = false; 
 
    }); 
 
} 
 

 
radioButtons.forEach(function(radioButton){ 
 
    radioButton.addEventListener('click',toggleCheck,false); 
 
});

<form> 
 
<input type="radio" class="checked" checked /> Radio A 
 
<input type="radio" /> Radio B 
 
</form>

Answer 2

Попробуйте: Удалите "указатель события: нет;"

.option-checkbox-1{ 
    opacity: 0.7; 
}