只允许一个单选按钮，从复选框的多组选择 [英] Allow only one radio button to be selected from multiple groups of checkboxes

问题描述

我有许多的帐户项目。

我在列表中显示这些做这样的事情。

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

• 管理


• 用户


• 主持人

现在，用户可以选择每个组单选按钮的值，但我想做的是只有一个管理员。

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.

如何才能做到这一点？

推荐答案

有一个作用域属性存储管理员项的NG-变化的方法来跟踪哪些项目已选定管理员：

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

然后用NG-禁用的管理员单选按钮，如果管理员已被选中，管理员不是当前的项目，将禁用单选​​按钮。

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

这篇关于只允许一个单选按钮，从复选框的多组选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！