Почему не работает переключение checked для input[type=radio]?

373

19 октября 2017, 10:34

Есть две кнопки с чекбоксами внутри. Вот разметка.

<label class="cloud-script-card"> 
  <i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i> 
  <span>My Script №1</span> 
  <div class="ui checkbox"> 
    <input type="radio"> 
    <label></label> 
  </div> 
</label> 
 
<label class="cloud-script-card"> 
  <i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i> 
  <span>My Script №2</span> 
  <div class="ui checkbox"> 
    <input type="radio"> 
    <label></label> 
  </div> 
</label>

пытаюсь сделать переключение по клику (по умолчанию обе кнопки белого цвета, при нажатии кнопка синеет и появляется галка). есть проблема - при клике на другую кнопку никак не удаётся снять с input псевдокласс :checked

дошёл до следующего JS-кода

$(".cloud-script-card").on("click", function(){ 
  $(".cloud-script-card").removeClass('active-script-card'); 
  $('.checkbox input:checked').prop('checked', false); 
  $(this).addClass('active-script-card'); 
});

подскажите, как добавить :checked кнопке, которая нас интересует

Answer 1

Добавьте радио-кнопкам имена, чтобы создать группу.

<label class="cloud-script-card"> 
<i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i> 
<span>My Script №1</span> 
<div class="ui checkbox"> 
<input type="radio" name="script"> 
<label></label> 
</div> 
</label> 
 
<label class="cloud-script-card"> 
<i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i> 
<span>My Script №2</span> 
<div class="ui checkbox"> 
<input type="radio" name="script"> 
<label></label> 
</div> 
</label>