how to prevent checkbox check when clicking on link inside label

Question

Hello,

I have a link inside a label. The problem is, when user clicks 'back' after having read the terms, the checkbox is unchecked, because when they clicked on the link they also unchecked the box at the same time, since the link is inside a label.

<input type="checkbox" id="terms" name="terms" checked="checked" /> 
<label for="terms">I agree to be bound by the <a href="/terms">Terms</a></label>

How can I prevent the checkbox from being checked when link is clicked? Tried doing event.preventDefault() on label click, but that doesn't prevent checkbox from being checked/unchecked.

I could just take out the link from inside a label (which means more CSS styling). But now I'm curious whether the above is possible.

Answer 1

You could have the link open up in a new window so that the page doesn't change.

If you don't want to do that you could check to see if the link has been visited and then automatically check the box.

Answer 2

You can cancel the click event by routing it through an onclick event.

The "return false;" part will prevent the click event from moving up to the label.

<input type="checkbox" id="terms" name="terms" checked="checked" /> 
<label for="terms">I agree to be bound by the <a href="#" onclick="window.open('/terms','_blank');return false;">Terms</a></label>

Answer 3

I have a similar situation, but the link actually opens a new window when clicked. This doesn't check/uncheck the box. I believe it is because the click doesn't bubble up through the link to the label.

So, to extend this, if you want the link to open in the same page, you could make it open using a click handler and preventing the click on the link from bubbling, like so:

$('label a').click(function(ev) { ev.preventDefault(); window.location.href = $(this).attr('href'); }

(It's untested and not the nicest use of JS, but it should solve your issue)

Answer 4

I agree the best way (for usability and ease) would be to open the terms in a new window, but if you wish to open it in the same one you can use this little function:

function stopLabel(e) {
    e.preventDefault();
    window.location= '/terms';
}

You could also put them straight into your onclick but this is a bit nicer imo.

You would have to pass the event to the function too:

<label for="terms">I agree to be bound by the <a href="/terms" onclick="stopLabel(event);">Terms</a></label>

If you decide to open it in a new window you can just change the window.location to window.open

Answer 5

Why not move the link outside the label?

<label for="terms">I agree to be bound by the</label> <a href="/terms">Terms</a>

Answer 6

The link should be outside the label and not a part of it since clicking on it will trigger two action (opening the link and checking the checkbox).

The user is expecting to trigger only one action, if the link looks like a link he would expect to be taken to the links target, or if the text is related to the checkbox the user will expect it to check the checkbox.

Answer 7

Jasons solution works fine, thanks!