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

Question

I have a table with a checkbox in one of the columns. When a checkbox is checked I push the row into an array.

I have tried to explain this better in terms of ..real world down below

The table can have rows with duplicate id(column of the row ( flat_id ) is different). The duplicate id I mentioned above is user_map_id .

When I check(click on the checkbox) a row, I want other rows with same user_map_id to be disabled.

So when a row is checked I store the user_map_id s in an array. And then I do this:

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

ie I disable the row if the user_map_id is present in the array with selected user_map_id s but this disables the one I checked too and I can't uncheck it if I want to.

So I pushed the flat_id s in an array too and did this:

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

ie Disable row if the row's user_map_id is present in the selectedUserMapIdArray (which stores the user_map_id ) array and not present in the selectedFlatNumArray (which stores the flat_id )

But now when I check a row that has a particular flat_id which is common with one of the duplicate user_map_id , flat_id , and then again check one in that group, the one with the common flat_id does not get disabled because the flat_id I checked above is present in the selectedFlatNumArray (which stores the flat_id ).

Explaining in terms of real world

Here's a screenshot:

The rows in the table are a list of flat owners and occupants(both have user_map_id ). A flat owner can have multiple flats(hence duplicate user_map_id s in the table). The flat owner can have multiple flats(different flat_ids ).

But the flat owner can have an occupant(same flat_id different user_map_id ). The occupant can reside in one of the many flats of the flat owner(same flat_id different user_map_id ).

I want to be able to check any of the flat owner(others get disabled) and also an occupant(if I want to).

If I check row with one of the flats of the flat owner, the other rows of belonging to same flat owner get disabled and works ok.

But when I check a row with an occupant and then again check a flat owner of that occupant (which does not have same flat_id ) the row with same flat_id won't get disabled because the flat_id is present in the selectedFlatNumArray (which stores the flat_id)

How do I do this?

The table:

 <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

I feel that your ng-disabled and your ng-title should be simplified so it would be easier to follow. I propose to remove your arrays and iterate through your original to see if it meets your conditions when one flat is changed. It would be easier to debug and avoid mistakes.

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

I would propose to iterate through your object when you change a checkbox to make the changes to other flats. Beware, it's untested code so it may need some tweaks.

$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

I don't fully understand your question, but I am getting the sense that you want to treat flat owners (users who own flats and can own many flats) differently than flat occupants (users who occupy flats and can only occupy a single flat). You are not going to be able to do that unless you store flat owners and flat occupants in different fields, which it looks like you are not doing.

Answer 3

Your desired behavior is unclear to me. Are you selecting flats or people? Why are you disabling flats when you want to allow people occupying the flats to be selected?

I think probably you want to just disable rows based on the user_id, giving you something like

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

Answer 4

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

Answer 5

from your first method: "disabling all rows with same id"

you can put an onClick function in which you can run some code ( with a 10ms delay to make sure your first function for disabling is done ) , send $this element into the function and enable this checkbox again.

in this method when you click on a checkbox all same check boxes will be disabled then the checkbox you click on will be enabled again.