Behinderte Radio-Buttons noch anklickbare

Question

Ich bin mit Bootstrap 3 und unter Verwendung von Radiobutton-Gruppen

<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'); 
    } 
}); 

Sagen ich die erste Optionsfeld Option auf 'Ja' und die zweite Option Bei "Ja" sollte der erste Satz auf "Nein" gesetzt und deaktiviert werden. Das scheint so weit zu arbeiten, wie ich sehen kann, aber wenn ich auf dem ersten Satz klicken, kann ich die Option ändern, obwohl sie sind deaktiviert

ich eine Geige an https://jsfiddle.net/tux7cftm/ erstellt haben, so können Sie das Problem sehen

Jede Hilfe willkommen

Answer 1

Fügen Sie den folgenden CSS Stylesheet

.disabled { 
    pointer-events: none; 
} 

CSS pointer-events