离子复选框仅在可单击的框上

Question

我想将我的<ion-checkbox>与<ion-label>分开。所以主要问题是，如果您单击标签，我必须显示其他信息，但您不应该激活复选框。只有在单击"复选框图标/复选框方块"时，才应激活该复选框。

<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

这不适用于 Ionic 4，因为 Shadow Dom 创建了一个覆盖标签元素并捕获点击事件的按钮元素。 Ionic 4 的解决方法是用跨度包装离子复选框，并使其相对。 这样，Shadow Dom 中的按钮将仅适合这个新跨度，使标签可以自由分配自定义单击事件。

<span class="checkbox-container">
<ion-checkbox slot="end" formControlName="accept"></ion-checkbox>
</span>
.checkbox-container {
position: relative;      
}

Answer 2

对于 ionic-4，将属性"position：relative"指定给 ion-checkbox。它有效！

ion-checkbox {
position:relative;
}

Answer 3

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

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

Answer 4

这对我来说很有用：

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

Answer 5

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

这也适用于在end处开槽的离子按钮。

<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/

Answer 6

对于 ionic 4，有一种解决方法是使用此处列出的ion-itemstart插槽。

<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"，底部边框是固定的。