ion-Checkbox only on box clickable

Question

我想将 <ion-checkbox> 与 <ion-label> 分开。所以主要的问题是，如果你点击标签，我必须显示额外的信息，但你不应该激活复选框。只有在 "checkbox icon/checkbox square".

上单击时，才应激活该复选框

<div>
  <ion-list>
    <ion-item *ngFor="let list of list">
    <ion-label (click)="showAdditionalInformations()">{{list.item.free_text}}</ion-label>
    <ion-checkbox *ngIf="list.item.checkbox==true"></ion-checkbox>
  </ion-item></ion-list>
</div>

有人可以帮助我吗？

Answer 1

您可以尝试将这段代码添加到您的CSS。它将隐藏包裹您的复选框和标签的叠加层。

ion-checkbox .item-cover{
  display:none;
}

Answer 2

这对我有用：

ion-checkbox {
    .item-cover {
        width: 70px;
    }
}

Answer 3

这不适用于 Ionic 4，因为 Shadow Dom 创建了一个覆盖标签元素并捕获点击事件的按钮元素。 Ionic 4 的解决方法是用跨度包裹 ion-checkbox，并使其相对。这样，Shadow Dom 中的按钮将只适合这个新的跨度，让标签自由分配自定义点击事件。

<span class="checkbox-container">
    <ion-checkbox slot="end" formControlName="accept"></ion-checkbox>
</span>

.checkbox-container {
   position: relative;      
}

Answer 4

对于 ionic 4，有一个变通方法，使用 ion-item 的 start 插槽，如 .

所示

<ion-item lines="full">
  <ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>

  <ion-label slot="start" (click)="labelClicked()">
    This is a separately clickable label
  </ion-label>
  <ion-checkbox slot="end"></ion-checkbox>
</ion-item>

lines="full" 下边框固定。

Answer 5

对于 ionic-4，将属性 "position:relative" 交给 ion-checkbox。有效！

ion-checkbox {
   position:relative;
}

Answer 6

对于像我一样通过 Google 到达这里的人，使用 Ionic 6 (2022) - 我解决了这个问题，给标签 z-index:3.

这也适用于位于 end 的 ion-button。

<ion-item>
  <ion-label>Select/unselect all</ion-label>
  <ion-checkbox slot="start" (ionChange)="selectAllFarmers($event)"></ion-checkbox>
  <ion-button style="z-index:3" slot="end" (click)="exportSelectedFarmers(remoteFarmers)">Export selected</ion-button>
  <ion-button style="z-index:3" slot="end" (click)="finaliseSelected()">Finalise farmers</ion-button>
</ion-item>

致谢：https://rubberchickin.com/how-to-fix-ion-checkbox-stealing-clicks-on-ion-item-elements/

ion-Checkbox only on box clickable

ion-Checkbox only on box clickable

html

ionic-framework

ionic3

ion-checkbox