僅允許從多個復選框組中選擇一個單選按鈕

Question

我有許多帳戶項目。

我在列表中顯示這些內容，例如

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

對於每個這樣的項目，我會在一個組中顯示三個單選按鈕，其值如下

• 管理員
• 用戶
• 主持人

現在，用戶可以為每組單選按鈕選擇一個值，但是我要執行的操作只有一個管理員。

因此，如果選擇了admin值，則我應阻止所有其他admin單選按鈕。

如何才能做到這一點？

Answer 1

有一個ng-change方法，將admin項目存儲在scope屬性中，以跟蹤選擇了admin的項目：

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

然后在admin單選按鈕上使用ng-disabled，如果已選擇管理員並且admin不是當前項目，它將禁用單選​​按鈕。

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

普倫克

Answer 2

我會創建一個變量，也許是adminExists ，當您在任意單選按鈕上選擇“ Admin”時，該變量將設置為true 。 然后， if(adminExists && !isSelected) ，則所有“ Admin”單選按鈕都將被禁用，如果該單選按鈕是所選的admin按鈕，則isSelected為true。

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>