MDL复选框问题:不希望标签激活复选框

MDL checkbox issue: don't want the label to activate the checkbox

本文关键字：复选框 标签 激活 希望 问题 MDL      更新时间：2023-09-26

我有一个Material Design life复选框，它的标签包含一个链接到Ts&Cs;但是点击链接会激活复选框。代码看起来像这样:

<label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
    <input mdl type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="loginRegisterData.termsConditions" #termsConditions (keyup.enter)="clickRegisterButton()">
    <span class="mdl-checkbox__label">I agree to the <a (click)="setVisiblePanel(5)" class="mouseHand">Terms and Conditions</a></span>
</label>

我真的不希望链接激活复选框。我尝试过各种重命名label s到div s，将div s移到label s之外等等，但还没有找到一个看起来体面的解决方案。

我已经在MDL网站上检查过了，似乎没有标准的方法来配置复选框。什么好主意吗?

将链接置于标签外部的单独span中，然后将标签的宽度设置为" auto "，这样它就不会占用整行。(并使用vertical-align:middle对齐链接)

<label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1" style="width:auto">
  <input mdl type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="loginRegisterData.termsConditions" #termsConditions (keyup.enter)="clickRegisterButton()">
  <span class="mdl-checkbox__label">I agree to the </span>
</label>
<span class="mdl-checkbox__label" style="vertical-align: middle"><a (click)="setVisiblePanel(5)" class="mouseHand">Terms and Conditions</a></span>

参见提琴:jsfiddle.net/yn8Ltt56

相关文章：