如何使用Angular 12与TypeScript实现复选框最多选5个时禁用未选中项并修改其CSS类

Let's walk through how to resolve your problem where unselected checkboxes don't get the correct CSS class when the maximum selection limit (5) is reached. Here's what we'll adjust:

1. Replace Manual Selection Tracking with a Computed Getter #

Your original checkboxList array can lead to synchronization bugs if the selected state changes outside of the changeSelection event. Instead, use a getter to dynamically calculate selected items:

// Remove the checkboxList array
public maxElementCheckbox = 5;
menuList: any[] = []; // Initialize this from your JSON data

// Getter to dynamically fetch all selected items
get selectedItems() {
  return this.menuList.flatMap(group => group.submenus.filter(item => item.selected));
}

// Update disableCheckbox to use the getter
public disableCheckbox(item): boolean {
  return this.selectedItems.length >= this.maxElementCheckbox && !this.selectedItems.includes(item);
}

// Load your JSON data (example in ngOnInit)
ngOnInit() {
  this.getJSON().subscribe(data => {
    this.menuList = data;
  });
}

2. Update the Label's ngClass to Handle Disabled State #

Modify the ngClass binding on your label to apply a special class when the checkbox is disabled and not 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]="{
        'submenulist_label_checked': sublist.selected,
        'submenulist_label_disabled': !sublist.selected && disableCheckbox(sublist),
        'submenulist_label': !sublist.selected && !disableCheckbox(sublist)
      }"
    >
      <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)" style="display:none;">
      </div>
    </label>
  </div>
</div>

3. Add CSS for Disabled Unselected Checkboxes #

Define the submenulist_label_disabled class to style disabled, unselected items (adjust styles to match your design):

.submenulist_label_disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none; /* Prevents clicking the label for disabled items */
}

Key Fixes Explained: #

• Dynamic Selection Tracking: The selectedItems getter ensures we always have an up-to-date list of selected items, eliminating synchronization issues from manual array management.
• CSS Class Logic: The updated ngClass checks both the selected state and whether the checkbox is disabled, applying the correct class for each scenario.
• Cleaner Event Handling: We removed the changeSelection function entirely since [(ngModel)] handles updating the selected state automatically, and our getter takes care of tracking selections.

This setup will correctly disable unselected checkboxes when 5 items are chosen, and apply your custom disabled CSS class to those items. When you uncheck an item, all disabled checkboxes will re-enable and revert to their default styling.

内容的提问来源于stack exchange，提问作者user18513197