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

Question

我有一个表格，其中一列中有一个复选框。当一个复选框被选中时，我将行插入一个数组。

我试图根据下面的..真实世界更好地解释这一点

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

当我选中(单击复选框)一行时，我希望其他行具有相同的 user_map_id被禁用。

所以当一行被选中时，我存储了 user_map_id s 在一个数组中。然后我这样做:

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

即，如果 user_map_id，我将禁用该行存在于所选 user_map_id 的数组中s 但这也禁用了我选中的那个，如果我想的话我不能取消选中它。

所以我推送了flat_id s 也在数组中并这样做:

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_id , flat_id ，然后再次检查该组中的一个，即具有常见 flat_id 的那个不会因为 flat_id 而被禁用我在上面检查过存在于 selectedFlatNumArray 中(存储 flat_id )。

根据现实世界进行解释

这是一个截图:

表中的行是公寓所有者和居住者的列表(都有 user_map_id )。一个公寓所有者可以拥有多个公寓(因此表中有重复的 user_map_id s)。公寓所有者可以拥有多个公寓(不同的 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>

Answer 1

我觉得您的 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'
                            : '';
         }
     });
 };