html - ion-Checkbox 仅在可点击的框上
问题描述
我想将 my<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>
有人能帮我吗?
解决方案
这不适用于 Ionic 4,因为 Shadow Dom 创建了一个覆盖标签元素并捕获点击事件的按钮元素。Ionic 4 的一种解决方法是用 span 包裹 ion-checkbox,并使其相对。这样,Shadow Dom 中的按钮将只适合这个新的跨度,保持标签自由分配自定义点击事件。
<span class="checkbox-container">
<ion-checkbox slot="end" formControlName="accept"></ion-checkbox>
</span>
.checkbox-container {
position: relative;
}
推荐阅读
- reactjs - Context 中的状态应该如何根据屏幕焦点传递到 FlatList 中?
- jenkins - 针对特定组成员的 Jenkins LDAP 身份验证
- mqtt - MQXR 负载平衡和请求/响应
- r - Glmer 需要数天的时间来计算并且永无止境
- sql - 参数化始终具有相同值的 SQL WHERE 子句是否有好处?
- firebase - Flutter中的InitState,从firestore中获取文档值
- firebase - Firestore 中的柜台存放在哪里?
- android - Android 在静默通知下分类通知
- javascript - 如何在Javascript中隐藏敏感信息
- postgresql - 如何将json数据插入postgresql bytea列?