Question

我想将ifelse与<ion-checkbox>分开。因此，主要问题是，如果您单击标签，则必须显示其他信息，但您不应激活该复选框。仅当单击“复选框图标/复选框方框”时，才应激活该复选框。

<ion-label>

有人可以帮我吗？

Answer 1

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

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

Answer 2

这对我有用：

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

Answer 3

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

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

.checkbox-container {
   position: relative;      
}

Answer 4

对于离子4，有一种解决方法，可以使用here的start的{{1}}插槽。

ion-item

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

Answer 5

对于ionic-4，将“ position：relative”属性赋予ion-checkbox。可行！

$value

ion-Checkbox仅在可点击的框中

5 个答案: