jQuery désactiver un lien

284

Quelqu'un sait comment désactiver un lien dans jquery SANS utiliser return false;?

Plus précisément, ce que j'essaie de faire est de désactiver le lien d'un élément, d'effectuer un clic dessus en utilisant jquery qui déclenche certaines choses, puis de réactiver ce lien afin que s'il est cliqué à nouveau, il fonctionne par défaut.

Merci. Dave

MISE À JOUR Voici le code. Ce qu'il doit faire après l'application de la .expandedclasse, c'est de réactiver le lien désactivé.

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});
davebowker
la source
7
Pourquoi l'exigence de ne pas utiliser return false? Utilisez-le, puis supprimez le gestionnaire d'événements lorsqu'il ne s'applique plus (ou mettez-y une conditionnelle pour renvoyer des valeurs différentes en fonction de l'état des "quelques trucs" mentionnés).
Quentin
Essayez-vous simplement d'effectuer un prétraitement avant de suivre le lien sur la même action de clic? c'est-à-dire que vous ne proposez pas deux clics mais plutôt un lien de clics utilisateur, certaines actions se produisent, le lien est suivi?
Lazarus
Sinon, pouvez-vous expliquer pourquoi vous adoptez cette approche, car une meilleure compréhension de l'espace du problème améliorera les réponses.
Lazarus
@lazarus, je propose 2 clics sur le même lien. 1 pour faire quelques trucs d'abord, puis le 2e pour traiter le lien comme un lien.
davebowker
@daviddorward, Jusqu'à présent, j'ai essayé de retourner false et cela continue jusqu'à la deuxième partie de mon objectif, c'est-à-dire de ne pas laisser passer le 2ème clic. Si vous pouviez écrire un court exemple, je vous en serais très reconnaissant.
davebowker

Réponses:

364
$('#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 didacticiel jQuery :

Pour le clic et la plupart des autres événements, vous pouvez 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 le 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 développée . S'il est visible (c'est-à-dire non masqué), le lien doit se déclencher normalement, car l'instruction if ne sera pas saisie, et donc 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);
    } 
});
karim79
la source
3
Avec jQuery 1.7+, vous pouvez utiliser on / off: stackoverflow.com/questions/209029/…
Lance Cleveland
s'il a un href et un onclick cela fonctionnera $ ("# myLink"). attr ('onclick', '') .click (function (e) {e.preventDefault ();});
Ronald McDonald
réalisé par ajax et jquery je peux cacher un achat href ayant le rappel pour empêcher les scrapers d'obtenir ces liens. Super merci!
Cesar Bielich
cet article a le moyen le plus simple d'utiliser le bootstrap , espérons qu'il aide.
shaijut
107

Essaye ça:

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

ÉDITER-

À partir de votre code mis à jour:

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);
TStamper
la source
3
Jouer avec href est très agréable car c'est un moyen rapide de désinstaller un lien qui fait une action via un événement onclick. Très très intelligent!
daitangio
méthode douce pour empêcher le navigateur d'ajouter le # dans l'URI lors de l'exécutionhref="#"
Abela
65

Pour ceux 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 = "buttonstyle"

mais aussi ces deux

class = "buttonstyle désactivé"

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

J'adore jQuery! ;-)

Hein
la source
2
cela suppose que le lien n'a pas de cible :)
dstarh
2
Au lieu de faire toute cette fantaisie, pourquoi ne pas simplement clouer le onclick plus haut dans le dom, utiliser on()pour filtrer tous les a.disabledliens et éviter les défauts. Ensuite, tout ce que vous avez à faire est d'activer / désactiver la classe désactivée et le lien se manipulera lorsqu'il est "activé".
CodeChimp
Pas besoin de "== true" - addClass ('désactivé') fonctionnera malgré tout. if(disabledCondition)
Fox Wilson
1
@fwilson, bien que vous ayez tout à fait raison, pour un programmeur débutant, il est plus facile à comprendre avec le == true. :)
carmenisme
Une raison particulière de ne pas le simplifier if ($(this).hasClass('disabled')) { e.preventDefault(); }?
Mir
58

Voici une autre solution css / jQuery que je préfère pour sa concision et son script minimisé:

css:

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

jQuery:

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});
Peter DeWeese
la source
7
De Mozilla : "Avertissement: L'utilisation d'événements de pointeur en CSS pour les éléments non-SVG est expérimentale. La fonctionnalité faisait partie du projet de spécification de l'interface utilisateur CSS3 mais, en raison de nombreux problèmes ouverts, a été reportée à CSS4."
marqueurs duelin
1
C'est une bonne considération, mais cela fonctionne bien dans la plupart des navigateurs modernes.
Peter DeWeese
Vous voudrez peut-être envisager de chaîner .prop("tabindex", "-1");après leaddClass
Oleg Grishko
19

Vous pouvez supprimer le clic pour le 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é «désactivé» pour les liens.

Kailas Mane
la source
1
Facile à activer et désactiver par rapport aux autres.
python1981
2
"Vous ne pouvez pas utiliser la propriété 'désactivé' pour les liens." Je me demande pourquoi il n'y a pas de cohérence entre un bouton et un lien de désactivation. "désactivé" devrait également fonctionner pour un lien. C'est comme dire qu'une voiture Chevy doit appuyer sur la pédale de frein pour s'arrêter, mais pour cet autre constructeur automobile, vous devez utiliser ce levier situé sur le toit.
eaglei22
14

Si vous suivez la route href, vous pouvez l'enregistrer

Pour désactiver:

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

Réactivez ensuite en utilisant:

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

Dans un cas, j'ai dû 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 celui-ci.

jBelanger
la source
12

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

$("form a").attr("disabled", "disabled");
matox
la source
Vous pouvez également l'utiliser $("form a").attr("disabled", false);pour le
réactiver
9

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 à css:

    a[disabled="disabled"] {
        pointer-events: none;
    }
Ch'nycos
la source
1
Je n'avais jamais rencontré cette propriété CSS auparavant, mais pour moi, c'est de loin la méthode la plus simple pour désactiver un lien hypertexte. La beauté de celui-ci est que lorsque vous supprimez la classe qui contient la pointer-events: nonepropriété des éléments d'ancrage, ils reviennent à faire ce qu'ils ont fait précédemment lorsque vous cliquez dessus. Donc, s'il s'agissait d'hyperliens de base, ils reviennent à la navigation vers l'URL dans leur hrefattribut, et s'ils ont un gestionnaire d'événements de clic défini, cela redevient actif. Beaucoup plus simple que d'enregistrer des hrefvaleurs et des gestionnaires de clics.
Philip Stratford
J'aime cette solution, c'est la plus simple.
louis
Sur une poignée de «solutions» quand rien ne fonctionnait (et abandonnant presque cette route), est venu à ce joyau . C'est une solution simple. Et le seul qui fonctionne vraiment. Gloire.
user12379095
5

Mes favoris dans "Commander pour modifier un article et empêcher les clics sauvages de l'ouest sauvage vers n'importe où- pendant une 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 deuxième barre d'outils d'action soient désactivés en "mode édition" comme décrit ci-dessus, j'ajouterai 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 la propriété désactivée pour les liens

À votre santé!

Lahmizzar
la source
3

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();
});
chaleur
la source
3

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

$(link).hide();
$(link).show();
David Fawzy
la source
2

Déclenchez simplement des éléments, définissez un indicateur, renvoyez false. Si le drapeau est défini - ne faites rien.

Michał Chaniewski
la source
J'ai essayé cela en définissant une classe, puis en l'appelant plus tard, mais en renvoyant false, cela empêche le lien d'être appelé.
davebowker
1

unbind()est déconseillé dans jQuery 3, utilisez off()plutôt la méthode:

$("a").off("click");
shintaroïde
la source
0

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>
Cruz Nunez
la source
0

Cela fonctionne pour les liens dont l'attribut onclick est défini en ligne. Cela vous permet également de supprimer plus tard le "retour faux" 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; ", ""));
        });
mga911
la source
-2

Utilisez simplement $("a").prop("disabled", true);. Cela désactivera vraiment l'élément de lien. Doit être prop("disabled", true). Ne pas utiliserattr("disabled", true)

André Amaral
la source