单击标签内的链接时如何防止复选框检查

Question

我在标签内有一个链接.问题是,当用户在阅读完术语后单击"返回"时,将取消选中该复选框,因为当他们点击链接时,他们也同时取消选中该框,因为该链接位于标签内.

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

如何在单击链接时阻止选中复选框？尝试event.preventDefault()在标签上单击,但这不会阻止选中/取消选中复选框.

我可以从标签内部取出链接(这意味着更多的CSS样式).但现在我很好奇以上是否可行.

Answer 1

您可以通过onclick事件路由来取消点击事件.

"回归虚假"; part将阻止click事件向上移动到标签.

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

也是允许target="_blank"在新标签中打开链接的好习惯.

/*
    Fix links inside of labels.
*/
$( 'label a[href]' ).click( function ( e ) {

    e.preventDefault();

    if ( this.getAttribute( 'target' ) === '_blank' ) {
        window.open( this.href, '_blank' );
    }
    else {
        window.location = this.href;
    }
});