Material Design - disable checkbox if

Question

I've got a table of items with checkbox and would like to disable them when user check 15 items.

My code is:

  <mdc-checkbox class="checkbox-primary" [(ngModel)]="item.isChecked"
      (change)="$event ? selection.toggle(row) : null" (click)="$event.stopPropagation()"
      (change)="onChecked(item)" [disabled]="itemList.length > 15">
    </mdc-checkbox>

It's works, but it's disable all of them, so you can't uncheck one of already checked and check another one.

So the question is - how to disable only unchecked checkboxes when user check 15th of them?

is your question then how to make sure you only have 15 checkboxes checked and no more? — DCR, Mar 20 '20 at 22:07

score 0 · Answer 1 · answered Mar 20 '20 at 22:51

with a little js we prevent having more than 3 checkboxes checked. Is that what you're looking for?

document.addEventListener("click", myClick);

function myClick(){




var cbs = document.getElementsByClassName('cb');

var index=-1;
var sum =0;
for(let i = 0;i<cbs.length;i++){
  if(cbs[i].checked==true)sum++;
  if(event.target==cbs[i])index=i;
 
}

if(sum > 3)cbs[index].checked=false;

}

<input type='checkbox' id='a' name ='1' class='cb'/>
<input type='checkbox' name ='2' class='cb'/>
<input type='checkbox' name ='3' class='cb'/>
<input type='checkbox' name ='4' class='cb'/>

Material Design - disable checkbox if

1 Answers1