Выбрать/Снять радиокнопки в модальном

Question

У меня есть модальный и на моем модале у меня есть определенный контроль, а также 3 переключателя. Я хочу, чтобы пользователь мог выбрать/отменить выбор радио кнопки ИЛИ Я хочу, чтобы пользователь ТОЛЬКО выбирал 1 радиокнопку. Я использую knockoutjs для привязки данных к моему модальному.

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

Я пытался использовать $('#ModalGroup').show('modal').on() функции, а затем я могу выбрать/отменить мои кнопки радио, но тогда мои привязки не работают соответствующим образом. Не знаете, как все это скомпоновать.

Jquery для выбора/delesect:

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

Jquery, что я использовал в $('#ModalGroup').show('modal').on()

Answer 1

Я нашел решение:

$("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"); 
     } 
    }); 

это будет выбрать/отменить выбор радиокнопки