инвалиды радиокнопка еще интерактивная

Question

Я использую Bootstrap 3 и с помощью группы радиокнопок

<div class="form-group required"> 
    <label for="option1" class="control-label col-md-4">Option 1</label> 
    <div class="col-md-6"> 
     <div class="btn-group" data-toggle="buttons"> 
      <label class="btn"> 
       <input id="opt1-yes" name="option1" type="radio" value="1"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> Yes</span> 
      </label> 
      <label class="btn"> 
       <input id="opt1-no" name="option1" type="radio" value="0"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> No</span> 
      </label> 
     </div> 
    </div> 
</div> 
<div class="form-group required"> 
    <label for="option2" class="control-label col-md-4">Option 2</label> 
    <div class="col-md-6"> 
     <div class="btn-group" data-toggle="buttons"> 
      <label class="btn"> 
       <input id="opt2-yes" name="option2" type="radio" value="1"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> Yes</span> 
      </label> 
      <label class="btn"> 
       <input id="opt2-no" name="option2" type="radio" value="0"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> No</span> 
      </label> 
     </div> 
    </div> 
</div> 

Jquery

$('input[type=radio][name=option2]').change(function() {  
    if($('#opt2-yes').is(':checked')) { 
     $('input[type="radio"][name="option1"]').attr('disabled', true).parent('.btn').addClass('disabled'); 
     $('#opt1-no').prop('checked', true); 
     $('#opt1-yes').parent('.btn').removeClass('active'); 
     $('#opt1-no').parent('.btn').addClass('active'); 
    } 
    else { 
     $('input[type="radio"][name="option1"]').attr('disabled', false).parent('.btn').removeClass('disabled'); 
    } 
}); 

Скажет, я установил первый вариант кнопки радио «Да», а второй вариант на «Да», первый набор должен измениться на «Нет» и быть отключен. Это, кажется, работает, насколько я могу видеть, но если я нажимаю на первом сете, я могу изменить вариант, даже если они отключены

Я создал скрипку в https://jsfiddle.net/tux7cftm/, так что вы можете увидеть проблему

Любая помощь приветствуется

Answer 1

Добавьте следующий CSS в таблице стилей

.disabled { 
    pointer-events: none; 
} 

См CSS pointer-events