仅允许从多个复选框组中选择一个单选按钮

Question

I have a number of account items.

I am displaying these in a list doing something like

<md-list-item ng-repeat="item in items">

and for every such item i display three radio buttons in a group, holding values like

• admin
• user
• moderator

Right now a user can select a value for each group of radio buttons, but what I want to do is have only one admin.

So if an admin value is selected the I should block all other admin radio buttons.

How can this be done?

Answer 1

Have a ng-change method that stores the admin item in a scope property to keep track of which item has admin selected:

$scope.radioChanged = function (item) {
  if (item.selectedValue == "admin") {
    $scope.admin = item;
  }
  else if (item == $scope.admin) {
    $scope.admin = undefined;
  }
};

Then use ng-disabled on the admin radio button that will disable the radio button if an admin has been selected and the admin is not the current item.

<div ng-repeat="item in items">
  <label><input type="radio" name="{{item.id}}" value="admin" ng-model="item.selectedValue" ng-change="radioChanged(item)" ng-disabled="admin && item != admin"/>admin</label>
  <label><input type="radio" name="{{item.id}}" value="user" ng-model="item.selectedValue" ng-change="radioChanged(item)"/>user</label>
  <label><input type="radio" name="{{item.id}}" value="moderator" ng-model="item.selectedValue" ng-change="radioChanged(item)"/>moderator</label>
</div>

Plunkr

Answer 2

I would create a variable, maybe adminExists , that is set to true when you select 'Admin' on any of the radio buttons. You could then have all the "Admin" radio buttons become disabled if(adminExists && !isSelected) , where isSelected is true if that radio button is the admin button that was selected.

Answer 3

The code below checks the value of the selected radio button against the value of other radio buttons to see if they match up (in this case if the value is "admin"). It then deselects all the radio input elements with that value and then checks the element that was initially clicked or selected to set it to active. You can change the function to use a data attribute instead of the value if you'd prefer as well.

 $(".group input[type=radio]").bind("click change keydown focus", function () { var el = $(this); var val = el.val(); if (el.prop("checked", true) && val == "admin") { $(".group input[type=radio]").each(function () { if ($(this).val() == "admin") $(this).prop("checked", false); }); el.prop("checked", true); } }); 

 .choice { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <div class="group"> <div class="choice"> <input type="radio" name="group[0][]" value="admin" /> <label>Admin</label> </div> <div class="choice"> <input type="radio" name="group[0][]" value="user" /> <label>User</label> </div> <div class="choice"> <input type="radio" name="group[0][]" value="moderator" /> <label>Moderator</label> </div> </div> <div class="group"> <div class="choice"> <input type="radio" name="group[1][]" value="admin" /> <label>Admin</label> </div> <div class="choice"> <input type="radio" name="group[1][]" value="user" /> <label>User</label> </div> <div class="choice"> <input type="radio" name="group[1][]" value="moderator" /> <label>Moderator</label> </div> </div> </form>