How to prevent a link inside a label from triggering a checkbox?

css, html, javascript, jquery

Solution

You should just need to bind an event to the link that calls `event.stopPropagation()` and `event.preventDefault()`

JQuery for all links in labels:

$(document).on("tap click", 'label a', function( event, data ){
    event.stopPropagation();
    event.preventDefault();
    window.open($(this).attr('href'), $(this).attr('target'));
    return false;
});

Pure javascript (you need to set an id on the link you want to follow)

var termLink = document.getElementById('termLink');
var termClickHandler = function(event) {
    event.stopPropagation();    
    event.preventDefault();
    window.open(termLink.href, termLink.target);
    return false;
};
termLink.addEventListener('click', termClickHandler);
termLink.addEventListener('touchstart', termClickHandler);

These expect the link target to be set to `_self` or `_blank` to open in the same window or a new window respectively.

Problem

I have this label: ``` <label><input type="checkbox"> I agree to the <a href="terms">terms</a> and would like to continue</label> ``` However, the link inside the label opens a foundation 5 reveal modal. This works fine, but clicking on the link also checks the checkbox. How can I prevent the checkbox from being checked when the link is clicked?

Original source