jak zapobiec checkbox check po kliknięciu na link wewnątrz etykiety

Question

Mam link wewnątrz etykiety. Problem polega na tym, że gdy użytkownik kliknie "wstecz" po przeczytaniu warunków, pole wyboru jest odznaczone, ponieważ po kliknięciu linku odznaczono również pole w tym samym czasie, ponieważ link znajduje się wewnątrz etykiety.

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

Jak mogę zapobiec zaznaczaniu tego pola wyboru po kliknięciu łącza? Próbowałem robić event.preventDefault() po kliknięciu etykiety, ale to nie przeszkadza w zaznaczeniu/odznaczeniu zaznaczenia pola wyboru.

Mogę po prostu wyjąć link z wnętrza etykiety (co oznacza więcej stylizacji CSS). Ale teraz jestem ciekawy, czy powyższe jest możliwe.

Answer 1

Możesz anulować zdarzenie click, przekierowując je przez zdarzenie onclick.

"return false;" część uniemożliwi przesunięcie zdarzenia kliknięcia do etykiety.

<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

Możesz otworzyć link w nowym oknie, aby strona się nie zmieniła.

Jeśli nie chcesz tego zrobić, możesz sprawdzić, czy link został odwiedzony, a następnie automatycznie zaznaczyć to pole.

Answer 3

Mam podobną sytuację, ale link faktycznie otwiera nowe okno po kliknięciu. To nie zaznacza/nie zaznacza pola. Uważam, że dzieje się tak dlatego, że kliknięcie nie przeskakuje przez link do etykiety.

Tak więc, aby przedłużyć ten, jeśli chcesz link, aby otworzyć na tej samej stronie, można uczynić go otworzyć za pomocą programu obsługi kliknij i zapobieganie kliknąć na link z pęcherzyków, tak:

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

(Jest nietestowany i nie jest najprzyjemniejszym użyciem JS, ale powinien rozwiązać twój problem)

Answer 4

Zgadzam się, że najlepszym sposobem (dla użyteczności i łatwości) byłoby otwarcie warunków w nowym oknie, ale jeśli chcesz otwórz go w tym samym, w którym możesz użyć tej małej funkcji:

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

Możesz również umieścić je bezpośrednio w swoim pliku onclick, ale jest to trochę ładniejsze imo.

Trzeba by przekazać zdarzenie do funkcji TOO:

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

Jeśli zdecydujesz się otworzyć go w nowym oknie można po prostu zmienić window.location do window.open

Answer 5

Dlaczego nie przenieść linku poza etykietę?

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

Answer 6

Link powinien być poza etykietą a nie jego część od kliknięcie na niego wywoła dwa działania (otwarcie link i sprawdzanie pole wyboru).

użytkownik spodziewa się wywołać tylko jedną akcję, jeśli link wygląda linkiem mógłby oczekiwać, aby być podjęte do celu links, lub jeśli tekst jest związana z wyboru użytkownik będzie oczekiwać, aby sprawdzić pole wyboru.

Answer 7

Dobra praktyka umożliwiająca otwieranie linków z target="_blank" w nowych kartach.

/* 
    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; 
    } 
}); 

Answer 8

Wystarczy dodać „dla” attibute i będzie zapobiegać unwanting przepuszczając

Answer 9

Jeśli jesteś ok z otwarciem linku w nowej karcie (i myślę, że jest lepiej, bo może użytkownik ma już wypełnione niektóre dane na stronie) to może być obsługiwane nawet bez 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> 

tutaj jest JS Fiddle Przykład

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