如何禁用未选中的复选框并仅使用 Angular 12 和 Typescript 更改选中复选框的 css class？

Question

我使用 json 对象数组动态存储了复选框。我需要的是，我只需要 select 5 个复选框。如果我的 selection 达到 5，那么我必须禁用未选中的复选框并仅针对未选中的复选框更改 css。我试过了，但是当 selection 达到 5 时，我无法将 class 更改为未 selected 复选框。

<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 文件

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);

}

Answer 1

如果在达到 5 个限制后禁用复选框并非 100% 必要，您可以在 changeSelection 函数中添加一个计数器，并在达到限制时向用户突出显示一条错误消息。

如果禁用复选框对你来说很重要，我脑海中的第一个想法可能是使用类似 select 的东西，或者对所有没有 active 属性的复选框元素使用 .querySelectorAll('.specificClassForTheCheckboxes') ;或者给你的复选框一个 id select 它们特定于属性 selected，值为 false。

Answer 2

我在您的 ngClass 中没有找到任何条件来检查未选中的复选框在选择 5 个复选框之后。这应该有所帮助：

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>

类型：

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;
}

这里是运行 demo.

如何禁用未选中的复选框并仅使用 Angular 12 和 Typescript 更改选中复选框的 css class？

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

javascript

checkbox

typescript

angular