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

Question

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

我试图在下面的..real world中更好地解释这个

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

当我检查（单击复选框）一行时，我希望禁用具有相同user_map_id其他行。

因此，当检查一行时，我将user_map_id存储在一个数组中。 然后我这样做：

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

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

所以我也将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重复）。 公寓业主可以有多个公寓（不同的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'
                            : '';
         }
     });
 };

Answer 2

我并不完全理解你的问题，但是我觉得你想要对待扁平业主（拥有单位且可以拥有许多单位的用户）的方式不同于平面居住者（占用单位并且只能占用单个单位的用户） 。 除非您将业主和平面居住者存放在不同的领域，否则您无法做到这一点，看起来您似乎没有这样做。

Answer 3

我不清楚你想要的行为。 你在选择公寓或人吗？ 当你想让人们占据公寓时，你为什么禁用单位？

我想你可能只想根据user_id禁用行，给你一些类似的东西

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

Answer 4

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

Answer 5

从您的第一个方法：“禁用具有相同ID的所有行”

你可以放一个onClick函数，你可以在其中运行一些代码（延迟10ms以确保完成禁用的第一个函数），将$ this元素发送到函数中并再次启用此复选框。

在此方法中，当您单击复选框时，将禁用所有相同的复选框，然后将再次启用您单击的复选框。