Issue
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 class="fixed-width-height-2-5 form-check">
<label class="form-check-label">
<input (click)="onCheckBoxChange(col)"
type="checkbox"
[checked]="col.MarkedForSelection" />
<span class="form-check-sign"></span>
</label>
</td>
<td class="fixed-width-height-3-5 text-center">
{{col.testName}}
</td>
</tr>
<tr><td class="divider transparent" 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.
Solution
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
Answered By - BizzyBob
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.