uncheck a checkbox which is in a for loop through a method

Question

I am having a checkbox inside a for loop and having a array to store the row details. I only wants to select two checkboxes at a time. when a user clicked on the 3rd checkbox, checkbox should be unchecked automatically while giving a toaster messege.

I have tried to implement this and am getting the toaster messege successfully. But 3rd checkbox is not getting unchecked automatically. Please help on this.

HTML

<tr *ngFor="let row of rows$; let indexOfEl = index">

    <td><input type="checkbox" value="indexOfEl (change)="onCheckboxChange($event,indexOfEl,row)"/></td>

</tr>

TS file

onCheckboxChange(event: any, index:any, data: any){

  if(event?.target?.checked){

      if(this.selectedCommand.length < 2){

      data.index = index;

      this.selectedCommand.push(data);

 }

 else {

        this.sharedService.showErrorNotification('Cannot select more than two commands', 'Error');

     }

}

  else this.selectedCommand = this.arrayRemove(this.selectedCommand,index);}

arrayRemove(array:any , index:any){

return array.filter(function(element){

  return element.index != index;

});

}

@IishfaaqIsmath please share a stackblitz with the issue replicated — Naren Murali, Aug 17 '22 at 09:43
have you tried setting event.target.checked = false in the else clause? — alexfar, Aug 17 '22 at 09:52
ok, you could bind the checked value of the mat-checkbox in your html form to a function which checks if it should be checked or not. For example you can create a function called isChecked(id: string){ return this.selectedCommand.find(id);} and then change the input html definition as follows or something similar — alexfar, Aug 17 '22 at 09:59
@Slikhut I have edited the question with arrayRemove function — Iishfaaq Ismath, Aug 17 '22 at 10:04
@Slikhut, refer to verified answer on this question, i think the easiest way to do it would be to bind to the click event instead of the change/ checked event: https://stackoverflow.com/questions/45726725/angular2-prevent-checkbox-from-being-checked — alexfar, Aug 17 '22 at 10:30

score 0 · Answer 1 · answered Aug 17 '22 at 12:21

I have quickly wrote it out how i would do it. Feel free to use this if it helps.

HTML

  <tr *ngFor="let command of commands">
    <td>
      <input
        type="checkbox"
        (change)="onCheckboxChange($event, command)"
      />
    </td>
  </tr>

TS

export class YourComponent {
  public selectedCommand: Command[] = [];
  public commands: Command[] = [
    { commandName: 'Command 1' },
    { commandName: 'Command 2' },
    { commandName: 'Command 3' },
    { commandName: 'Command 4' },
    { commandName: 'Command 5' }
  ];

  constructor() { } 

  public onCheckboxChange(event: any, data: Command) {
    if (event?.target?.checked) {
      if (this.selectedCommand.length < 2) {
        this.selectedCommand.push(data);
      }
      else {
        this.sharedService.showErrorNotification('Cannot select more than two commands', 'Error');
        event.target.checked = false;
      }
    }
    else {
      var indexToRemove = this.selectedCommand.findIndex(x => x.commandName == data.commandName);
      this.selectedCommand.splice(indexToRemove, 1);
    }
  }

}

interface Command {
  commandName: string;
}

uncheck a checkbox which is in a for loop through a method

1 Answers1