web-dev-qa-db-fra.com

Comment empêcher un lien dans une étiquette de déclencher une case à cocher?

J'ai cette étiquette:

<label><input type="checkbox"> I agree to the <a href="terms">terms</a> and would like to continue</label>

Cependant, le lien à l’intérieur de l’étiquette ouvre une fondation 5 révélatrice modale. Cela fonctionne bien, mais en cliquant sur le lien, cochez également la case.

Comment puis-je empêcher la case à cocher d'être cochée lorsque le lien est cliqué?

javascriptjqueryhtmlcss
24
kevinius

Vous devriez juste avoir besoin de lier un événement au lien qui appelle event.stopPropagation() et event.preventDefault()

JQuery pour tous les liens dans les libellés:

$(document).on("tap click", 'label a', function( event, data ){
    event.stopPropagation();
    event.preventDefault();
    window.open($(this).attr('href'), $(this).attr('target'));
    return false;
});

Javascript pur (vous devez définir un identifiant sur le lien que vous souhaitez suivre)

var termLink = document.getElementById('termLink');
var termClickHandler = function(event) {
    event.stopPropagation();    
    event.preventDefault();
    window.open(termLink.href, termLink.target);
    return false;
};
termLink.addEventListener('click', termClickHandler);
termLink.addEventListener('touchstart', termClickHandler);

Ceux-ci s'attendent à ce que la cible du lien soit définie sur _self ou _blank pour s'ouvrir dans la même fenêtre ou dans une nouvelle fenêtre. 

14
elvey

Étant donné que plusieurs étiquettes peuvent pointer vers la même case à cocher, vous pouvez modifier le texte en deux étiquettes (pointant vers la case à cocher) et le texte d'ancrage au milieu.

<input id="cb" type="checkbox">
<label for="cb">I agree to the</label>
<a href="#">terms</a>
<label for="cb">and would like to continue</label>

En utilisant la technique ci-dessus, cliquer sur le lien n’affecte pas l’état de la case à cocher, mais tout le texte restant l’a.

10
Danield

Les éléments interactifs au sein des éléments interactifs entraînent des problèmes fonctionnels tels que: il n’est pas défini ce qui se produit lorsque vous cliquez sur un élément a dans un élément label ou vice versa. Pour éviter cela, retirez l'élément a de l'élément label, par exemple.

<label><input type="checkbox">I agree</label> to the <a href="terms">terms</a>
and would like to continue

ou

<input type="checkbox" id="agree"><label for="agree">I agree</label> to the
<a href="terms">terms</a> and would like to continue
4
Jukka K. Korpela

Une autre manière en ligne:

<label>
     <input type="checkbox"> 
     I aggree to the 
     <span  onclick="event.stopPropagation();">
          <a href="terms">terms</a>
     </span>
     and would like to continue
</label>
1
GlennG

Arrêtez la propagation de l'événement click sur le lien. Cela empêche l’événement click de se propager jusqu’à l’étiquette.

https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

1
i_like_robots

jQuery:

$('label a').each(function(){
    var $this = $(this),
        span = $('<span onclick="event.stopPropagation();"></span>');
    span.html($this.clone());
    $this.replaceWith(span);
});
0
Gynio

Essaye ça . Ça marche pour moi

<label><input type="checkbox"> I aggree to the <a href="terms" target="_blank" style="display: inline-block; z-index: 99999999999999999999; position: relative;">terms</a> and would like to continue</label>

0
gr-three