web-dev-qa-db-fra.com

jQuery désactiver un lien

Quelqu'un sait comment désactiver un lien dans jQuery sans utiliser return false;?

Plus précisément, ce que j'essaie de faire, c’est de désactiver le lien d’un élément en effectuant un clic dessus à l’aide de jQuery, ce qui déclenche des opérations, puis en réactivant ce lien afin qu’il fonctionne par défaut s'il est à nouveau cliqué.

Merci . Dave

UPDATE Voici le code. Ce qu’il faut faire après l’application de la classe .expanded est de réactiver le lien désactivé.

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});
jqueryhyperlink
269
davebowker
$('#myLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

Cela empêchera le comportement par défaut d'un lien hypertexte, qui consiste à visiter le href spécifié.

À partir du jQuery tutorial :

Pour le clic et la plupart des autres événements, vous peut empêcher le comportement par défaut - ici, en suivant le lien vers jquery.com - en appelant event.preventDefault () dans le gestionnaire d'événements

Si vous souhaitez preventDefault() uniquement si une certaine condition est remplie (quelque chose est caché par exemple), vous pouvez tester la visibilité de votre ul avec la classe expand. S'il est visible (c'est-à-dire non masqué), le lien devrait se déclencher normalement, car l'instruction if ne sera pas saisie et le comportement par défaut ne sera pas empêché:

$('ul li').click(function(e) {
    if($('ul.expanded').is(':hidden')) {
        e.preventDefault();
        $('ul').addClass('expanded');
        $('ul.expanded').fadeIn(300);
    } 
});
349
karim79

Essaye ça:

$("a").removeAttr('href');

MODIFIER-

Depuis votre code mis à jour:

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);
101
TStamper

Pour les autres qui sont venus ici via google comme moi, voici une autre approche:

css:
.disabled {
  color: grey; // ...whatever
}

jQuery:
$('#myLink').click(function (e) {
  e.preventDefault();
  if ($(this).hasClass('disabled'))
    return false; // Do something else in here if required
  else
    window.location.href = $(this).attr('href');
});

// Elsewhere in your code
if (disabledCondition == true)
  $('#myLink').addClass('disabled')
else
  $('#myLink').removeClass('disabled')

Rappelez-vous: non seulement c'est une classe css 

class = "style de bouton"

mais aussi ces deux

class = "style de bouton désactivé"

vous pouvez donc facilement ajouter et supprimer d'autres classes avec jQuery. Pas besoin de toucher href ...

J'aime jQuery! ;-)

62
Hein

Voici une solution alternative css/jQuery que je préfère pour son caractère concis et ses scripts minimisés:

css:

a.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

jQuery:

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});
50
Peter DeWeese

Vous pouvez supprimer cliquez pour lien en suivant;

$('#link-id').unbind('click');

Vous pouvez réactiver le lien en suivant,

$('#link-id').bind('click');

Vous ne pouvez pas utiliser la propriété 'disabled' pour les liens.

16
Kailas Mane

Si vous choisissez la route href, vous pouvez la sauvegarder 

Pour désactiver:

$('a').each(function(){
    $(this).data("href", $(this).attr("href")).removeAttr("href");
});

Puis réactivez en utilisant:

$('a').each(function(){
    $(this).attr("href", $(this).data("href"));
});

Dans un cas, je devais le faire de cette façon car les événements de clic étaient déjà liés ailleurs et je n'avais aucun contrôle sur eux. 

14
jBelanger

J'utilise toujours cela dans jQuery pour désactiver les liens

$("form a").attr("disabled","disabled");
6
matox

Mes favoris dans "la commande pour modifier un élément et empêcher les clics de type" wild wild west "à n'importe où en cours de commande"

$('a').click(function(e) {
    var = $(this).attr('disabled');
    if (var === 'disabled') {
        e.preventDefault();
    }
});

Donc, si je veux que tous les liens externes dans une seconde barre d'outils d'action soient désactivés dans le "mode d'édition" décrit ci-dessus, je vais ajouter la fonction d'édition

$('#actionToolbar .external').attr('disabled', true);

Exemple de lien après un incendie:

<a href="http://goo.gl" target="elsewhere" class="external" disabled="disabled">Google</a>

Et maintenant, vous POUVEZ utiliser une propriété désactivée pour les liens

À votre santé!

4
Lahmizzar

vous pouvez simplement masquer et afficher le lien comme vous le souhaitez

$(link).hide();
$(link).show();
3
David Fawzy

Vous devriez trouver votre réponse ici .

Merci @Will et @Matt pour cette solution élégante.

jQuery('#path .to .your a').each(function(){
    var $t = jQuery(this);
    $t.after($t.text());
    $t.remove();
});
3
warmth

exemple de lien html:

        <!-- boostrap button + fontawesome icon -->
        <a class="btn btn-primary" id="BT_Download" target="blank" href="DownloadDoc?Id=32">
        <i class="icon-file-text icon-large"></i>
        Download Document
        </a>

utiliser ceci dans jQuery

    $('#BT_Download').attr('disabled',true);

ajoutez ceci au css:

    a[disabled="disabled"] {
        pointer-events: none;
    }
3
Ch'nycos

Il suffit de déclencher des éléments, de définir un indicateur, de renvoyer false. Si flag est activé, ne rien faire.

2
Michał Chaniewski

unbind() était obsolète en jQuery 3, utilisez plutôt la méthode off():

$("a").off("click");
1
shintaroid

Je sais que ce n'est pas avec jQuery mais vous pouvez désactiver un lien avec quelques CSS simples:

a[disabled] {
  z-index: -1;
}

le HTML ressemblerait

<a disabled="disabled" href="/start">Take Survey</a>
0
Cruz Nunez

Cela fonctionne pour les liens dont l'attribut onclick est défini en ligne. Cela vous permet également de supprimer ultérieurement le "return false" afin de l'activer.

        //disable all links matching class
        $('.yourLinkClass').each(function(index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", "return false; " + OnClickValue);
        });

        //enable all edit links
        $('.yourLinkClass').each(function (index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", OnClickValue.replace("return false; ", ""));
        });
0
mga911