Disable

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>
                <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