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>

I didn't downvote, but I might have, because despite all that you have written, it is still unclear what you want to happen or why you think what you are doing should implement what you want to happen. Also, you failed to provide a [working example](https://stackoverflow.com/help/mcve), which makes it hard to see what you are talking about and harder to debug it. — Old Pro, Dec 08 '18 at 06:26
I think this may it be helpful: https://stackoverflow.com/questions/22059438/html-duplicated-id — I_Al-thamary, Dec 08 '18 at 06:39

L105 · Answer 1 · 2018-12-13T15:37:58.823

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'
                            : '';
         }
     });
 };

hey. thanks. i should have done it like this but i've got other things to work on and this will take some time to change using what you've done. so i will wait till the last day of bounty to see if someone will give me a solution using what i've done already. sorry — Abhi, Dec 12 '18 at 05:29

score 2 · Answer 2 · answered Dec 08 '18 at 06:31

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.

answered Dec 08 '18 at 06:31

Old Pro

24,624
7
58
106

i don't have time right now. i will create an example and post later. – Abhi Dec 08 '18 at 06:47

score 1 · Answer 3 · answered Dec 13 '18 at 19:07

1

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"

answered Dec 13 '18 at 19:07

Old Pro

24,624
7
58
106

im selecting people. the flat owner can or cannot have people in his flat. the user can look at his name and select any of the rows – Abhi Dec 14 '18 at 08:56
hey i dont have time to try what you've said in answer. i will award the bounty anyway because it will mostly work. – Abhi Dec 15 '18 at 06:27

score 0 · Answer 4 · answered Dec 10 '18 at 11:09

0

You can't uncheck checkboxes with same id property because id is unique ,try to change the ng-model value from true to false

answered Dec 10 '18 at 11:09

Chandra Upendra

21
4

score 0 · Answer 5 · answered Dec 13 '18 at 08:00

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.

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

5 Answers5