He almacenado casillas de verificación dinámicamente usando una matriz json de objetos. Lo que necesito es seleccionar solo 5 casillas de verificación. Si mi selección llega a 5, entonces tengo que deshabilitar las casillas de verificación sin marcar y cambiar el css solo para las casillas de verificación sin marcar. Lo intenté, pero cuando se alcanza la selección 5, no puedo cambiar la clase a esas casillas de verificación no seleccionadas.
<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>archivo componente.ts
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); }Si no es 100% necesario que las casillas de verificación se deshabiliten después de alcanzar el límite de 5, puede agregar un contador a su función changeSelection y resaltar un mensaje de error para el usuario, si se alcanza el límite.
Si es fundamental para usted deshabilitar las casillas de verificación, una primera idea en mi mente podría ser usar algo como un selector para todos los elementos de la casilla de verificación sin un atributo activo con .querySelectorAll('.specificClassForTheCheckboxes'); o asigne a sus casillas de verificación una identificación para seleccionarlas específicamente en el atributo seleccionado con el valor falso.
No encuentro ninguna condición en su ngClass para marcar las casillas de verificación no seleccionadas después de seleccionar 5 casillas de verificación. Eso debería ayudar:
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>MECANOGRAFIADO:
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; }Aquí hay una demostración en ejecución.