如果选中具有相同ID的另一个复选框,如何禁用复选框

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (233)

我有一个表格,其中一个列中有一个复选框。选中复选框后,我将该行推入数组。

我试图用下面的..real world示例更好地解释这个

该表可以包含重复id的行(row(flat_id)的列不同)。我上面提到的重复ID是user_map_id

当我检查(单击复选框)一行时,我希望user_map_id禁用其他行。

因此,当检查一行时,我将user_map_ids 存储在一个数组中。然后我这样做:

ng-disabled="selectedUserMapIdArray.indexOf(flat.user_map_id) >= 0

即如果user_map_id数组中存在选定的user_map_ids ,则禁用该行,但这会禁用我检查的那个,如果我愿意,我也无法取消选中它。

所以我也将数据推入flat_id数组并执行此操作:

ng-disabled="selectedUserMapIdArray.indexOf(flat.user_map_id) >= 0 && selectedFlatNumArray.indexOf(flat.flat_id) < 0 "

即禁用行,如果该行的user_map_id是存在于selectedUserMapIdArray(其存储user_map_id)阵列和在不存在selectedFlatNumArray(其存储flat_id

但现在当我检查有特定的行flat_id是常见的有重复的一个user_map_idflat_id,然后再在该组中二选一,一个与普通flat_id没有得到禁用,因为flat_id我在上面签是存在于selectedFlatNumArray(其中存储flat_id)。

解释现实世界

这是一个截图:

表中的行是业主和占用者的列表(两者都有user_map_id)。公寓业主可以有多个单位(因此user_map_id表中有副本)。公寓业主可以有多个单位(不同flat_ids)。

但是公寓老板可以有一个占用者(同样flat_id不同user_map_id)。乘客可以居住在公寓业主的许多公寓之一(相同的flat_id不同user_map_id)。

我想能够检查任何一个公寓老板(其他人被禁用)和一个占用者(如果我想)。

如果我检查平面所有者的一个平面的行,属于同一个平面所有者的其他行被禁用并且正常工作。

但是当我检查一个占用者的行,然后再次检查该占用者的一个扁平所有者(它没有相同flat_id)时,具有相同行的flat_id行将不会被禁用,因为flat_id它存在于selectedFlatNumArray(存储flat_id)

我该怎么做呢?

表:

 <tbody>
    <tr ng-repeat="flat in someObj.flatsArray | filter:searchFlat">
       <td>{{ flat.occupant_name || flat.owner_name}}</td>
       <td>{{flat.flat_no}}</td>
       <td class="text-center">
     <input class="" name="{{flat.flat_no}}" ng-attr-title="{{(selectedUserMapIdArray.indexOf(flat.user_map_id) >= 0 && selectedFlatNumArray.indexOf(flat.flat_id) < 0) ? 'This user has been already invited' : ''}}"
         ng-disabled="selectedUserMapIdArray.indexOf(flat.user_map_id) >= 0 && selectedFlatNumArray.indexOf(flat.flat_id) < 0 "
     type="checkbox" ng-change="checkChanged(flat.isChecked, flat)" ng-model="flat.isChecked" />
              </td>
</tr>
</tbody>
提问于
用户回答回答于

您无法取消选中具有相同ID属性的复选框,因为id是唯一的,请尝试将ng-model值从true更改为false

用户回答回答于

我觉得你ng-disabled和你的ng-title应该简化,以便更容易理解。我建议删除你的数组并迭代你的原文,看看它是否符合你的条件flat。调试和避免错误会更容易。

<input name="{{flat.flat_no}}" 
       ng-attr-title="{{flat.title}}"
       ng-disabled="flat.isDisabled"
       type="checkbox" 
       ng-change="flatChange(flat)" 
       ng-model="flat.isChecked" />

当您更改复选框以对其他单位进行更改时,我建议迭代您的对象。请注意,这是未经测试的代码,可能需要一些调整

$scope.flatChange = function(changedFlat) {
    $scope.someObj.flatsArray.forEach(function(flat) {

        if (changedFlat.checked) {
            if (flat.user_map_id === changedFlat.user_map_id && flat.flat_id !== changedFlat.flat_id) {
                if (changedFlat.idChecked) // If flat is checked, uncheck each one with the same `user_map_id` but not the same `flat_id`.
                    flat.isChecked = false;
                }

                flat.isDisabled = !changedFlat.checked; // `disabled` propriety is the opposite of `checked`.
                flat.title = changedFlat.checked
                            ? 'This user has been already invited'
                            : '';
         }
     });
 };

扫码关注云+社区

领取腾讯云代金券