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?

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?

• javascript
• angularjs

Share Improve this question Follow edited Aug 6, 2015 at 14:08 dearn44 asked Aug 6, 2015 at 14:03 dearn44dearn44 3,43244 gold badges3737 silver badges7171 bronze badges 6

• Sorry your title says checkboxes and your question has radio buttons? – Wayne Ellery Commented Aug 6, 2015 at 14:04
• @WayneEllery sorry about that, fixed it. – dearn44 Commented Aug 6, 2015 at 14:08
• Is it a group of checkboxes or radio buttons because you question says radio buttons and the little still says checkboxes – Wayne Ellery Commented Aug 6, 2015 at 14:09
• No no its radio boxes, sorry for the mistake. – dearn44 Commented Aug 6, 2015 at 14:12
• Define only one admin. That can be interpreted several ways – charlietfl Commented Aug 6, 2015 at 14:12

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

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

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 bee disabled if(adminExists && !isSelected), where isSelected is true if that radio button is the admin button that was selected.

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./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>