Html 仅可单击框上的“离子”复选框

我想将我的

与

分开。所以主要的问题是，如果你点击标签，我必须显示额外的信息，但是你不应该激活复选框。仅当单击“复选框图标/复选框方框”时，复选框才应激活

{{list.item.free_text}

---

有人能帮我吗？

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

ion复选框。项目封面{
显示：无；
}

这为我带来了好处：

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

---

这不适用于Ionic 4，因为Shadow Dom创建了一个覆盖label元素的button元素并捕获单击事件。 Ionic 4的一个解决方法是用一个span包装Ionion复选框，并使其相对。 这样，阴影Dom中的按钮将只适合这个新范围，从而使标签可以自由地指定自定义单击事件

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

.checkbox-container {
   position: relative;      
}

.复选框容器{
位置：相对位置；
}

对于爱奥尼亚4，使用

爱奥尼亚项目

的

开始

插槽可以解决问题

这是一个可单独单击的标签

---

使用

lines=“full”

底部边框是固定的。

对于ionic-4，将属性“位置：相对”设置为ionic复选框。它起作用了

ion-checkbox {
   position:relative;
}

---

我以前尝试过这个解决方案，但是通过点击标签，复选框仍然被选中。啊，我很笨。。。。我遗漏了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>

ion-checkbox {
   position:relative;
}