Ionic5：禁用离子复选框导致放置在相同离子项目中时禁用离子标签

Question

I'm trying to only disable ion-checkbox but this resulted in disabling the ion-label placed in the same ion-item.

<ion-item>
   <ion-label>Using GPS</ion-label>
   <ion-checkbox slot="start" [(ngModel)]='reachedUsingBeacon' disabled="true"></ion-checkbox>
</ion-item>

I tried to solve it by adding pointer-events: auto; but it didn't work.

ion-item {
    pointer-events: auto;
}

Any help will be appreciated. Thanks!

Answer 1

I was able to solve this issue by removing the disabled property and use css to style it accordingly:

.disabled {
  pointer-events: none;
  opacity: 0.6;
}