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

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

Answer 2

我会创建一个变量，可能是adminExists，当您在任何单选按钮上选择“管理员”时，该变量设置为true。然后，您可以禁用所有“管理”单选按钮 if(adminExists && !isSelected)，如果该单选按钮是被选中的管理按钮，则 isSelected 为真。

Answer 3

下面的代码检查所选单选按钮的值与其他单选按钮的值是否匹配（在这种情况下，如果值为“admin”）。然后它取消选择具有该值的所有单选输入元素，然后检查最初单击或选择的元素以将其设置为活动状态。如果您愿意，也可以更改函数以使用数据属性而不是值。

$(".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>