How to disable checkboxes if another checkbox with same id is checked

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_ids in an array. And then I do this:

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

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

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

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

i.e 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_ids 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.