Angular mat-checkbox

Praneeth Salukooti

7y2.7kAngular

If there are 6 check-boxes in a form then how to limit the user to check only 3 check-boxes

in angular without using jQuery or Java Script

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

archana devi7y ago
Hi @Praneeth Salukooti
I have edited my answer. Try this

TYPESCRIPT
checkbox: boolean;
  checkbox1: boolean;
  checkbox2: boolean;
  checkbox3: boolean;
  constructor() {
    //this.checkbox = false;
  }
count=0;
  onCheckboxChange() {
    if (this.count >=3) {
      setTimeout(()=>{
       alert("u can check only 3 boxes")
        this.checkbox = false;
        this.checkbox1 = false;
        this.checkbox2 = false;
        this.checkbox3 = false;
      })
      this.count=this.count-1;
    }
    else{
      this.count++;
    }
  }
HTML
<label>
<input type='checkbox' [(ngModel)]='checkbox' (ngModelChange)='onCheckboxChange()'>java
<input type='checkbox' [(ngModel)]='checkbox1' (ngModelChange)='onCheckboxChange()'>ionic
<input type='checkbox' [(ngModel)]='checkbox2' (ngModelChange)='onCheckboxChange()'> angular
<input type='checkbox' [(ngModel)]='checkbox3' (ngModelChange)='onCheckboxChange()'> react
label>
Praneeth Salukooti7y ago
@Archana Devi , your solution working , but if we click the ok button alert it is checking the 4 th check box also
archana devi7y ago
Hi,

Html Code
CHOOSE YOUR PREFERENCE(max 3)
<br>
<input type="checkbox" [(ngModel)]="checkbox1" (change)="check(checkbox1)" name="ar" value="java"/>  java
<input type="checkbox" [(ngModel)]="checkbox2" (change)="check(checkbox2)" name="ionic" />  ionic
<input type="checkbox" [(ngModel)]="checkbox3" (change)="check(checkbox3)" name="angular"/>  angular
<input type="checkbox" [(ngModel)]="checkbox4" (change)="check(checkbox4)" name="react" />  react
form>
Typescript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
constructor(){

  }
count: number =0;
isChecked=false;
check(event: any){
   if(this.count >= 3){
      !this.isChecked;
         alert("only 3 checks are allowed");
   }
   else{
   this.count++;
   }
}
}
Hope it is helpful
Piyush Pansuriya7y ago
You can check the count when checkbox checked.
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked)" />
inside the class
checkcnt: number =0;

checkValue(event: any){
   if(checkcnt >= 3){
       !isChecked;
   }
   else{
   checkcnt++;
   }
}