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  *ngFor="let item of menuList">
  <div>
    <div >
      
      <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);

}

CodePudding user response：

I don't find any condition in your ngClass for checking the unselected checkboxes after selecting 5 check boxes. That should help:

HTML:

<div  *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.

CodePudding user response：

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.