Comment activer ou désactiver une ancre à l'aide de jQuery?

Comment activer ou désactiver une ancre à l'aide de jQuery?

Pour empêcher une ancre de suivre le spécifié href, je suggérerais d'utiliser preventDefault():

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

Voir:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

Voir également cette question précédente sur SO:

jQuery désactiver un lien

L'application sur laquelle je travaille actuellement le fait avec un style CSS en combinaison avec javascript.

a.disabled { color:gray; }

Ensuite, chaque fois que je veux désactiver un lien que j'appelle

$('thelink').addClass('disabled');

Ensuite, dans le gestionnaire de clics pour 'thelink' une balise, j'exécute toujours une vérification en premier

if ($('thelink').hasClass('disabled')) return;

J'ai trouvé une réponse que j'aime beaucoup mieux ici

Ressemble à ça:

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

L'activation impliquerait de définir l'attribut href

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

Cela vous donne l'impression que l'élément d'ancrage devient du texte normal, et vice versa.

$("a").click(function(){
                alert('disabled');
                return false;

}); 

Je pense qu'une meilleure solution consiste à définir l'attribut de données désactivé et à ancrer une vérification pour celui-ci au clic. De cette façon, nous pouvons désactiver temporairement une ancre jusqu'à ce que, par exemple, le javascript soit terminé avec un appel ajax ou certains calculs. Si nous ne le désactivons pas, nous pouvons rapidement cliquer dessus quelques fois, ce qui n'est pas souhaitable ...

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

J'ai fait un exemple jsfiddle: http://jsfiddle.net/wgZ59/76/

La réponse sélectionnée n'est pas bonne.

Utilisez le style CSS pointeur-événements . (Comme Rashad Annara l'a suggéré)

Voir MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Il est pris en charge dans la plupart des navigateurs.

L'ajout simple d'un attribut "désactivé" à l'ancre fera l'affaire si vous avez une règle CSS globale comme suit:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

Essayez les lignes ci-dessous

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Coz, même si vous désactivez la <a>balise hreffonctionnera donc vous devez hrefégalement supprimer .

Lorsque vous voulez activer, essayez ci-dessous les lignes

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

C'est aussi simple que de retourner false;

ex.

jQuery("li a:eq(0)").click(function(){
   return false;
})

ou

jQuery("#menu a").click(function(){
   return false;
})

$('#divID').addClass('disabledAnchor');

Dans un fichier css

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}

$("a").click(function(event) {
  event.preventDefault();
});

Si cette méthode est appelée, l'action par défaut de l'événement ne sera pas déclenchée.

Si vous essayez de bloquer toute interaction avec la page, vous voudrez peut-être consulter le plug-in jQuery BlockUI

Vous n'avez jamais vraiment spécifié comment vous vouliez les désactiver, ou ce qui provoquerait la désactivation.

Tout d'abord, vous voulez savoir comment définir la valeur sur désactivé, pour cela, vous utiliseriez les fonctions d'attribut de JQuery , et que cette fonction se produise sur un événement , comme un clic , ou le chargement du document.

Pour les situations où vous devez placer du texte ou du contenu html dans une balise d'ancrage, mais vous ne voulez tout simplement pas qu'une action soit entreprise lorsque vous cliquez sur cet élément (comme lorsque vous voulez qu'un lien de pagination soit à l'état désactivé car il est la page courante), découpez simplement le href. ;)

<a>3 (current page, I'm totally disabled!)</a>

La réponse de @ michael-meadows m'a averti, mais il traitait toujours de scénarios dans lesquels vous devez / travaillez toujours avec jQuery / JS. Dans ce cas, si vous avez le contrôle sur l'écriture du html lui-même, il vous suffit de xer la balise href, la solution est donc purement HTML!

D'autres solutions sans jQuery finagling qui conservent le href vous obligent à mettre un # dans le href, mais cela fait rebondir la page vers le haut, et vous voulez juste qu'elle soit complètement désactivée. Ou le laisser vide, mais selon le navigateur, cela fait toujours des choses comme sauter vers le haut, et c'est du HTML invalide selon les IDE. Mais apparemment, une abalise est du HTML totalement valide sans HREF.

Enfin, vous pourriez dire: D'accord, pourquoi ne pas simplement vider complètement le tag a? Parce que souvent vous ne pouvez pas, la abalise est utilisée à des fins de style dans le framework CSS ou le contrôle que vous utilisez, comme le paginateur de Bootstrap:

http://twitter.github.io/bootstrap/components.html#pagination

Donc, avec une combinaison des réponses ci-dessus, je suis venu avec ceci.

a.disabled { color: #555555; cursor: default; text-decoration: none; }

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 

Si vous n'en avez pas besoin pour se comporter comme une balise d'ancrage, je préférerais le remplacer du tout. Par exemple, si votre balise d'ancrage est comme

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

puis en utilisant jquery, vous pouvez le faire lorsque vous avez besoin d'afficher du texte au lieu d'un lien.

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

Ainsi, nous pouvons simplement remplacer la balise d'ancrage par une balise div. C'est beaucoup plus facile (juste 2 lignes) et sémantiquement correct aussi (parce que nous n'avons pas besoin d'un lien maintenant donc ne devrait pas avoir de lien)

Désactivez ou activez tout élément avec la propriété disabled.

// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );