title: Disable <mat-checkbox> after a certain count
body: <p>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.</p>
  <p>Sample Code:</p>
  <pre><code>&lt;div cdkDropList class=&quot;example-list&quot;
                   (cdkDropListDropped)=&quot;drop($event)&quot; *ngIf=&quot;templatearray.length !== 0&quot;&gt;
                &lt;div class=&quot;example-box&quot;
                     *ngFor=&quot;let key2 of templatearray&quot; cdkDrag&gt;{{key2}}
                  &lt;div&gt;
                    &lt;button mat-icon-button type=&quot;button&quot; class=&quot;buttonCustom&quot;&gt;
                      &lt;mat-checkbox class=&quot;example-margin&quot; color=&quot;warn&quot; (change)=&quot;onChange($event)&quot;&gt;&lt;/mat-checkbox&gt;
                    &lt;/button&gt;
                    &lt;button mat-icon-button type=&quot;button&quot; class=&quot;buttonCustom&quot;&gt;
                    &lt;span class=&quot;material-icons&quot;&gt;
                     remove_circle
                     &lt;/span&gt;
                    &lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  </code></pre>
  <p>Sample stackblitz: <a href="https://stackblitz.com/edit/angular-ivy-9grcqt?file=src/app/app.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-9grcqt?file=src/app/app.component.ts</a></p>
  <p>If I add [disabled] attribute, all the checkboxes are disabled
  <a href="https://i.stack.imgur.com/AgKbg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AgKbg.png" alt="This is how it looks when I add disabled attribute" /></a></p>