MDL复选框问题：不希望标签激活复选框答案

【问题标题】：MDL checkbox issue: don't want the label to activate the checkboxMDL复选框问题：不希望标签激活复选框
【发布时间】：2017-02-08 23:23:53
【问题描述】：

我有一个 Material Design Lite 复选框，其标签包含指向 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>

我真的不希望链接激活复选框。我尝试了各种将labels 重命名为divs，将divs 移到labels 之外等等，但还没有找到看起来不错的解决方案。

我在 MDL 网站上查过，似乎没有标准的方式来配置复选框。有什么想法吗？

【问题讨论】：

标签： javascript html checkbox material-design

【解决方案1】：

将链接放在标签之外的单独跨度中，然后将标签的宽度设置为“自动”，这样它就不会占据整行。（并使用 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

【讨论】：