Allow only one radio button to be selected from multiple checkbox groups
I have multiple account items .
I am showing them in a list doing something like
<md-list-item ng-repeat="item in items">
and for each such element, I display three radio buttons in the group, keeping values ββlike
- admin
- User
- Leading
The user can now select a value for each radio button group, but I want to have only one administrator.
So, if admin is selected, I have to lock all other admin radio buttons.
How can I do that?
source to share
Have an ng-change method that stores the admin element in the scope property to keep track of which element was selected by the admin:
$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 switch, which will disable the switch if admin was selected and admin is not the current one.
<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>
source to share
I would create a variable, perhaps adminExists
that is set to true
when you select "Admin" on any of the radio buttons. You can then disable all "Admin" radio buttons if(adminExists && !isSelected)
, where isSelected
is true if that radio button is the admin button that was selected.
source to share
The code below checks the value of the selected radio button against the value of the other radio buttons to see if they match (in this case, if the value is "admin"). It then deselects all radio input items with that value, and then checks the item that was originally clicked or selected to set it to active. You can change the function to use the data attribute instead of the value if you like.
$(".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>
source to share