there is some bug when i select option A and then select option B the checked property of A becoe false instead both should be true
<li
          *ngIf="btn.functionType === 'dropdown' && btn.enableMultiSelectLabelByStatus"
          [ngStyle]="{ display: btn.isActive ? 'block' : 'none' }"
          class="btn tooltip"
          (click)="toogleDropdown($event, btn)"
        >
          <label *ngIf="btn.name === 'labelBy'" class="select-label">{{ btn.displayText }}</label>
          <input
            *ngIf="btn.name === 'labelBy'"
            readonly
            [(ngModel)]="selectedLabelByString"
            [ngClass]="btn.className"
            class="labelBy-inputBox"
            id="{{ btn.name }}"
          />
          <i *ngIf="btn.name === 'labelBy'" class="fas fa-angle-down labelBy-Arrow"></i>
          <i *ngIf="btn.name === 'facility'" [ngClass]="btn.className"></i>

          <ul
            *ngIf="btn.functionType === 'dropdown'"
            id="{{ btn.name }}"
            class="switcher"
            [ngClass]="{ isSwitcherActive: btn.name === 'labelBy' ? showCheckboxes : facilityToggle }"
            (mouseleave)="btn.name === 'labelBy' ? (showCheckboxes = false) : (facilityToggle = false)"
          >
            <!-- "$event.stopPropagation()" is used to prevent the dropdown from closing when user clicks on checkboxes -->
            <li
              *ngFor="let opt of btn.options; trackBy: trackByFunction"
              [ngClass]="{ selectedOption: opt?.checked }"
              [ngStyle]="{ display: 'flex', gap: '2px' }"
              (click)="$event.stopPropagation()"
            >
              <input
                type="checkbox"
                [attr.value]="opt.value"
                [attr.name]="opt.name"
                id="{{ btn.name }}_{{ opt.value }}"
                [checked]="opt?.checked"
                [disabled]="opt.disable"
                (change)="btn.name === 'labelBy' ? checkLabelBy($event, btn, opt) : checkFacility($event, btn, opt)"
                style="flex-shrink: 0"
              />
              <label class="checkboxLabel" for="{{ btn.name }}_{{ opt.value }}">{{ opt.name }}</label>
            </li>
          </ul>
        </li>
checkFacility(event: Event, btn: IZBtnInterface, opt: IZLibBtnOptions): void {
    const eventTarget: EventTarget | null = event.target;
    console.log('btn', btn);

    if (eventTarget && eventTarget instanceof HTMLInputElement) {
      const facility: IZBtnInterface | undefined = btn;
      if (facility && facility.functionType === 'dropdown') {
        const optIndex: number = facility.options.findIndex((e: IZLibBtnOptions) => e.value == opt.value);
        const optionItem: IZLibBtnOptions | undefined = facility.options[optIndex];
        if (optionItem) {
          optionItem.checked = eventTarget.checked;
          const element: HTMLElement | null = document.getElementById('facility_' + optionItem.value);
          if (element) {
            if (eventTarget.checked) {
              element?.parentElement?.classList.add('selectedOption');
            } else {
              element?.parentElement?.classList.remove('selectedOption');
            }
          }
        }
        const selectedItems: IZLibBtnOptions[] = facility.options.filter((e: IZLibBtnOptions) => e.checked);
        this.clickEvent.emit({
          name: btn.name,
          event,
          info: btn,
          selectedFacilityOption: selectedItems,
          facilityToggle: this.facilityToggle
        });
      }
    }
  }