CODEWITHSUNDEEP
angulartypescriptcheckboxangular-material
Karry Bee
Karry Bee

Reputation: 141

Disable <mat-checkbox> after a certain count

So I am trying to print a list and each list element has a checkbox inside it. Let's say I have a list of 10 elements, I want to be able to check only 5, and the remaining ones should be disabled. Once the user unchecks any element, he/she should be able to select again.

Sample Code:

<div cdkDropList class="example-list"
                 (cdkDropListDropped)="drop($event)" *ngIf="templatearray.length !== 0">
              <div class="example-box"
                   *ngFor="let key2 of templatearray" cdkDrag>{{key2}}
                <div>
                  <button mat-icon-button type="button" class="buttonCustom">
                    <mat-checkbox class="example-margin" color="warn" (change)="onChange($event)"></mat-checkbox>
                  </button>
                  <button mat-icon-button type="button" class="buttonCustom">
                  <span class="material-icons">
                   remove_circle
                   </span>
                  </button>
                </div>
              </div>

Sample stackblitz: https://stackblitz.com/edit/angular-ivy-9grcqt?file=src/app/app.component.ts

If I add [disabled] attribute, all the checkboxes are disabled This is how it looks when I add disabled attribute

Upvotes: 0

Views: 3581

Answers (1)

Derek Wang
Derek Wang

Reputation: 10193

On *ngFor, you can get the index for each item like

*ngFor="let key2 of templatearray; let i = index"

And based on that i (index variable), you can disable the mat-checkbox from the specific point.

For example, if you want to disable checkboxes from the 5th, you can set as follows.

<mat-checkbox class="example-margin" color="warn" (change)="onChange($event)" [disabled]="i > 4"></mat-checkbox>

This is the completed codes.

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)" *ngIf="templatearray.length !== 0">
  <div class="example-box" *ngFor="let key2 of templatearray; let i = index" cdkDrag>{{key2}}
    <div>
      <button mat-icon-button type="button" class="buttonCustom">
        <mat-checkbox class="example-margin" color="warn" (change)="onChange($event)" [disabled]="i > 5"></mat-checkbox>
      </button>
      <button mat-icon-button type="button" class="buttonCustom">
        <span class="material-icons">
          remove_circle
        </span>
      </button>
    </div>
  </div>

Upvotes: 1

Related Questions