Как предотвратить проверку флажка при нажатии на ссылку внутри метки

У меня есть ссылка внутри метки. Проблема заключается в том, что когда пользователь нажимает "назад" после чтения условий, флажок не установлен, потому что когда они нажимают на ссылку, они также снимают флажок одновременно, так как ссылка находится внутри метки.

<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). Но теперь мне интересно, возможно ли это.

Ответ 1

Вы можете отменить событие клика, проложив его через событие onclick.

"return false"; часть предотвратит перемещение объекта 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>

Ответ 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;
    }
});

Ответ 3

Почему бы не переместить ссылку за пределами метки?

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

Ответ 4

Просто добавьте атрибут "для", и это предотвратит появление нежелательных пузырьков

Ответ 5

Вы могли бы открыть ссылку в новом окне, чтобы страница не изменилась.

Если вы не хотите этого делать, вы можете проверить, была ли ссылка посещена, а затем автоматически установите флажок.

Ответ 6

У меня аналогичная ситуация, но при нажатии на ссылку открывается новое окно. Это не проверяет/снимает флажок. Я считаю, что это происходит потому, что клик не пузырится по ссылке на метку.

Итак, чтобы расширить это, если вы хотите, чтобы ссылка открывалась на той же странице, вы могли бы открыть ее с помощью обработчика кликов и предотвратить щелчок по ссылке из пузырьков, например:

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

(Это непроверено и не самое приятное использование JS, но оно должно решить вашу проблему)

Ответ 7

Я согласен, что лучший способ (для удобства и простоты) - открыть термины в новом окне, но если вы хотите открыть его в том же самом, вы можете использовать эту небольшую функцию:

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

Вы также можете поместить их прямо в свой onclick, но это немного лучше imo.

Вам также нужно передать событие функции:

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

Если вы решили открыть его в новом окне, вы можете просто изменить window.location на window.open

Ответ 8

Ссылка должна быть вне метки, а не ее частью, так как нажатие на нее вызывает два действия (открытие ссылки и установка флажка).

Пользователь ожидает запуска только одного действия, если ссылка выглядит как ссылка, которую он будет ожидать, чтобы попасть в цель ссылок, или если текст связан с этим флажком, пользователь будет ожидать, что он установит флажок.

Ответ 9

Если вам нравится открывать ссылку на новой вкладке (и я думаю, что это лучше, потому что, возможно, пользователь уже заполнил некоторые данные на странице), тогда это можно обрабатывать даже без js

<input type="checkbox" id="agreed" />
<label for="agreed">
    I agree with <a href="/terms-of-use" target="_blank">Terms of use</a> and <a href="/privacy-policy" target="_blank">Privacy Policy</a>
</label>

вот пример js скрипка

http://jsfiddle.net/davo3/zkcv3L3d/