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="{{item.icon}}"/>
</div>
<div>
<span>{{item.title}}</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>
{{ sublist.menu }}
<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);
}
If its not 100% necessary that the checkboxes will be disabled after the limit of 5 is reached, you could add a counter to your changeSelection function and highlight a error message to the user, if the limit is reached.
If it is fundamental for you to disable the checkboxes one first idea in my mind could be using something like a selector for all checkbox elements without an active attribute with .querySelectorAll('.specificClassForTheCheckboxes'); or give your checkboxes an id to select them specific on the attribute selected with the value false.
I don't find any condition in your ngClass for checking the unselected checkboxes after selecting 5 check boxes. That should help:
HTML:
<div class="pinnedtoolsbox" *ngFor="let item of menuList">
<div *ngFor="let sublist of item.submenus; let i = index">
<label
[ngClass]="checkboxList.length >= maxElementCheckbox && !sublist.selected ? 'submenulist_label' : 'submenulist_label_checked'">
<div>
<input
type="checkbox"
[(ngModel)]="sublist.selected"
[disabled]="disableCheckbox(sublist)"
(change)="changeSelection($event, sublist)"/>
<label>{{sublist.menu}}</label>
</div>
</label>
</div>
</div>
TYPESCRIPT:
menuList = [
{
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,
},
{
id: 3,
menu: 'Test1',
selected: false,
},
{
id: 4,
menu: 'Test2',
selected: false,
},
{
id: 5,
menu: 'Test3',
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);
}
}
public disableCheckbox(id): boolean {
return (
this.checkboxList.length >= this.maxElementCheckbox &&
this.checkboxList.indexOf(id) == -1
);
}
CSS:
.submenulist_label {
color: red;
}
Here's a running demo.