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