Sélectionner/Désélectionner les boutons radio en modal

Question

J'ai un modal et sur mon modal j'ai un certain contrôle et aussi 3 boutons radio. Je souhaite que l'utilisateur puisse sélectionner/désélectionner un bouton radio OU que je souhaite qu'un utilisateur sélectionne SEULEMENT un bouton radio. J'utilise knockoutjs pour lier des données à mon modal.

Modal:

<div id="ModalGroup" class="modal hide fade" data-bind="with: Data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Add Group</h3> 
    </div> 
    <div class="modal-body"> 
     <div class="control-group"> 
      <label class="control-label"> 
       Group Name 
      </label> 
      <div class="controls"> 
       <input type="text" id="GroupName" data-bind="value: GroupName" /> 
      </div> 

      <label class="control-label"> 
       Group Description 
      </label> 
      <div class="controls"> 
       <input type="text" id="GroupDescription" data-bind="value: GroupDescription" /> 
      </div> 

      <label class="control-label">Group Scope</label> 
      <div class="controls" id="scope"> 
       <label class="radio"> 
        <input type="radio" id="Local" name="Local" value="Local" /> 
        Local 
       </label> 
       <label class="radio"> 
        <input type="radio" id="Global" name="Global" value="Global" /> 
        Global 
       </label> 
       <label class="radio"> 
        <input type="radio" id="Universal" name="Universal" value="Universal" /> 
        Universal 
       </label> 
      </div> 
      <div class="controls"> 
       <label class="control-label"> 
        Security 
       </label> 
       <input id="IsSecurity" type="checkbox" checked="checked" data-bind="value: IsSecurity" /> 
       Is Security? 
      </div> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary" id="CreateGroup" data-bind="click: vm.Save">Create Group</button> 
    </div> 
</div> 

ViewModel:

vm = { 
     Data: ko.observable(), 

     Add: function() { 
      $("#ModalGroup").modal("show"); 

      vm.Data(ko.utils.unwrapObservable(ko.mapping.fromJS({ 
       GroupName: "", 
       GroupScope: "", 
       GroupDescription: "" 
      }))); 

      if (!vm.Bound) { 
       ko.applyBindings(vm); 
       vm.Bound = true; 
      } 
     } 
} 

J'ai essayé d'utiliser la fonction $('#ModalGroup').show('modal').on() puis je suis en mesure de sélectionner/désélectionner mes boutons radio mais mes fixations ne fonctionne pas en conséquence. Je ne sais pas comment mettre tout cela ensemble.

Jquery pour sélectionner/delesect:

$('input[type=radio]').change(function() { 
    if (this.checked) { 
     $(this).closest('.scope') 
     .find('input[type=radio]').not(this) 
     .prop('checked', false); 
    } 
}); 

Le Jquery est ce que je l'intérieur $('#ModalGroup').show('modal').on()

Answer 1

J'ai trouvé une solution:

$("input[type='radio']").click(function (event) { 
     // If the button is selected. 
     if ($(this).hasClass("checked")) { 
      // Remove the placeholder. 
      $(this).removeClass("checked"); 
      // And remove the selection. 
      $(this).removeAttr("checked"); 
      // If the button is not selected. 
     } else { 
      // Remove the placeholder from the other buttons. 
      $("input[type='radio']").each(function() { 
       $(this).removeClass("checked"); 
      }); 
      // And add the placeholder to the button. 
      $(this).addClass("checked"); 
     } 
    }); 

Cela permet de sélectionner/désélectionner des boutons radio