cómo evitar la casilla de verificación cuando se hace clic en el enlace dentro de la etiqueta

Question

Tengo un enlace dentro de una etiqueta. El problema es que cuando el usuario hace clic en 'volver' después de haber leído los términos, la casilla de verificación está desmarcada, porque cuando hicieron clic en el enlace también desmarcaron la casilla al mismo tiempo, ya que el enlace está dentro de una etiqueta.

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

¿Cómo puedo evitar que se marque la casilla de verificación cuando se hace clic en el enlace? Intenté haciendo event.preventDefault() al hacer clic en la etiqueta, pero eso no impide que se marque/desmarque la casilla de verificación.

Podría sacar el enlace desde dentro de una etiqueta (lo que significa más estilo CSS). Pero ahora tengo curiosidad de saber si lo anterior es posible.

Answer 1

Puede cancelar el evento click enrutando a través de un evento onclick.

El "return false;" Parte evitará que el evento de clic se mueva hacia la etiqueta.

<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

Puede hacer que el enlace se abra en una nueva ventana para que la página no cambie.

Si no quiere hacer eso, puede verificar si el enlace ha sido visitado y luego marcar automáticamente la casilla.

Answer 3

Tengo una situación similar, pero el enlace en realidad se abre una nueva ventana cuando hace clic. Esto no marca/desmarca la casilla. Creo que es porque el clic no aparece en el enlace de la etiqueta.

lo tanto, para extender esta, si desea que el enlace se abra en la misma página, usted podría hacer que se abra el uso de un controlador de clic y prevenir el clic en el enlace de burbujeo, así:

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

(No se ha probado y no es el mejor uso de JS, pero debería resolver su problema)

Answer 4

Estoy de acuerdo en que la mejor manera (por usabilidad y facilidad) sería abrir los términos en una nueva ventana, pero si desea ábralo en el mismo que puede utilizar esta pequeña función:

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

También podría ponerlos directamente en su onClick pero esto es un poco más agradable.

Usted tendría que pasar el caso a la función también:

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

Si decide abrirlo en una nueva ventana se puede simplemente cambiar el window.location a window.open

Answer 5

Por qué no mover el enlace fuera de la etiqueta?

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

Answer 6

El enlace debe estar fuera de la etiqueta y no una parte de ella desde clic en él desencadenará dos acción (abrir el enlace y el control de la casilla de verificación).

El usuario está esperando para disparar una sola acción, si el enlace se parece a un enlace que espera ser llevado a la meta enlaces, o si el texto se relaciona con la casilla de verificación que el usuario esperará para comprobar la casilla de verificación.

Answer 7

También es una buena práctica permitir la apertura de enlaces con target="_blank" en pestañas nuevas.

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

Basta con añadir el 'para' attibute y se impedirá unwanting burbujeante

Answer 9

Si estás bien con abrir el enlace en una nueva pestaña (y creo que es mejor, porque tal vez el usuario tiene ya está lleno algunos datos de la página), entonces esto puede ser manejado incluso sin 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> 

aquí es ejemplo violín js

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