MDLチェックボックスの問題：ラベルにチェックボックスを有効にしないようにする

Question

ラベルにTs &Cs;へのリンクが含まれるMaterial Design Liteチェックボックスがありますが、リンクをクリックするとチェックボックスが有効になります。コードは次のようになります。

<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をdivに移動しようとしましたが、divはlabelのように外側に移動していますが、まともに見える解決策は見つかりませんでした。

私はMDLウェブサイトをチェックしましたが、この方法でチェックボックスを設定する標準的な方法はないようです。何か案は？

Answer 1

リンクをラベルの外側の別のスパンに置き、ラベルの幅を 'auto'に設定して、行全体を占めないようにします。

<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

：（中央と垂直整列を使用してリンクを揃えます）