How to disable the unselected checkboxes and change the css class for selected checkboxes only using Angular 12 and Typescript?

I have stored checkboxes dynamically using json array of object. What I need is, I have to select only 5 checkboxes. If my selection is reached 5, then I have to disable the unchecked checkboxes and change the css only for unchecked checkboxes only. I tried but when the selection is reached 5 I am not able to change the class to that unselected checkboxes.

<div class="pinnedtoolsbox" *ngFor="let item of menuList">
  <div>
    <div class="pinnedtoolbox-caption">
      
      <div>
      
        <img src=""/>
     
          
      </div>
      <div>
        <span></span>
     

      </div>
      
      </div>
  </div>

  

  <div  *ngFor="let sublist of item.submenus; let i=index" >
  
  <label [ngClass]="sublist.selected ? 'submenulist_label_checked': 'submenulist_label'">
   <div>
   <img [src]="sublist.selected ? 'assets/icons/listmenuiconwhite.svg': 'assets/icons/listicon.svg'"/>
   </div>
   <div>
     
    

    <input type="checkbox"
    [(ngModel)]="sublist.selected" 
    [disabled]="disableCheckbox(sublist)"  
    (change)="changeSelection($event, sublist)"
    
    style="display:none;">
   </div>
  
  </label>
  </div>

  </div>

component.ts file

private _jsonURL = 'assets/menus.json';

public getJSON(): Observable<any> {
 return this.http.get(this._jsonURL);
}   

[{"title":"one",
"submenus": [
    {
        "id":1, "menu": "home", "selected": false
    },
    {
        "id":2, "menu": "about", "selected": false
    },
   
    
]
 
},

{"title":"two",
    
"submenus": [
    {
        "id":1, "menu": "Status", "selected": false
    },
    {
        "id":2, "menu": "Balance", "selected": false
    },
    
   
    
]
},

    



]


checkboxList = [];
public maxElementCheckbox = 5;


changeSelection($event, item){

if ($event.target.checked) {
 
  this.checkboxList.push(item);
 
 }

else {
  
  this.checkboxList.splice(this.checkboxList.indexOf(item), 1);
  console.log("esle part");
}
console.log(this.checkboxList);
}

 public disableCheckbox(id): boolean {

return this.checkboxList.length >= this.maxElementCheckbox && !this.checkboxList.includes(id);

}