javascript - 允许从多组复选框中只选择一个单选按钮

Question

我有一些帐户项。

我将这些显示在一个列表中，做类似的事情

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

对于每一个这样的项目，我在一组中显示三个单选按钮，保存如下值

• 管理员
• 用户
• 主持人

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

因此，如果选择了管理值，我应该阻止所有其他管理单选按钮。

如何做到这一点？

Answer 1

有一个 ng-change 方法将管理项目存储在范围属性中以跟踪管理员选择了哪个项目:

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

然后在管理员单选按钮上使用 ng-disabled，如果已选择管理员且管理员不是当前项目，则将禁用单选​​按钮。

<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