Limiting a checkbox to 5 checkmarks-CodePudding

Within a multi-column table, each column has a checkmark, and my wish is to stop the possibility to tick a checkmark at 5 checkmarks.

Below is the code implemented so far:

 <tbody>
    <ng-container *ngFor="let col of testData">
      <tr>
        <td >
          <label >
            <input (click)="onCheckBoxChange(col)"
                   type="checkbox"
                   [checked]="col.MarkedForSelection" />
            <span ></span>
          </label>
        </td>
        <td >
          {{col.testName}}
        </td>
      </tr>
      <tr><td  colspan="2"></td></tr>
    </ng-container>

onCheckBoxChange(item: any){
var count = this.testData.filter(x => x.MarkedForSelection == true).length;

if(count == 4 && item.MarkedForSelection == false){
  return;
}
else if(count == 4 && item.MarkedForSelection == true){
  this.selectAllCheckBox = true;
}
else {item.MarkedForSelection = !item.MarkedForSelection;}
 }

I tried to use the "[checked]" property but even if "col.MarkedForSelection" remains false the checkmark will be checked.

CodePudding user response：

You could just disable the checkboxes when the selected count is > 4:

<input type="checkbox"
   (click)="onCheckBoxChange(col)"
   [checked]="col.MarkedForSelection"
   [disabled]="selectedItemCount > 4 && !col.MarkedForSelection"
/>

  selectedItemCount = 0;

  onCheckBoxChange(item: DataItem) {
    item.MarkedForSelection = !item.MarkedForSelection;
    this.selectedItemCount = this.testData.filter(i => i.MarkedForSelection).length;
  }

Here's a fun little StackBlitz