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

I have a Material Design Lite checkbox whose label includes a link to Ts&Cs; but clicking on the link activates the checkbox. The code looks like this:

<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>

I don't really want the link to activate the checkbox. I have tried various renaming labels to divs, moving divs outside labels and so on, but haven't found a solution that looks decent.

I have checked on the MDL website, and it seems there is no standard way to configure checkboxes in this way. Any ideas?