désactiver un hyperlien à l'aide de jQuery

Question

<a href="gohere.aspx" class="my-link">Click me</a>

Je l'ai fait.

$('.my-link').attr('disabled', true);

mais ça n'a pas marché

Existe-t-il un moyen simple de désactiver l'hyperlien à l'aide de jquery ? Supprimer le href ? Je préfère ne pas manipuler les href. Donc si je peux le faire sans supprimer le href, ce serait génial.

Answer 1

Vous pouvez lier un gestionnaire de clics qui renvoie false :

$('.my-link').click(function () {return false;});

Pour le réactiver, il suffit de délier le gestionnaire :

$('.my-link').unbind('click');

Notez que disabled ne fonctionne pas car il est conçu pour les entrées de formulaire uniquement.

---

jQuery a déjà anticipé ce problème en fournissant un raccourci à partir de jQuery 1.4.3 :

$('.my-link').bind('click', false);

Et pour délier / réactiver :

$('.my-link').unbind('click', false);

Answer 2

Je sais que c'est une vieille question, mais elle ne semble toujours pas résolue. Voici ma solution...

Il suffit d'ajouter ce gestionnaire global :

$('a').click(function()
{
     return ($(this).attr('disabled')) ? false : true;
});

Voici une démonstration rapide : http://jsbin.com/akihik/3

vous pouvez même ajouter un peu de css pour donner un style différent à tous les liens avec l'attribut désactivé.

Par exemple

a[disabled]
{
    color: grey; 
}

Quoi qu'il en soit, il semble que l'attribut "désactivé" ne soit pas valide pour les éléments suivants a tags. Si vous préférez suivre les spécifications du W3C, vous pouvez facilement adopter un système conforme à la norme html5. data-disabled attribut. Dans ce cas, vous devez modifier le snippet précédent et utiliser $(this).data('disabled') .

Answer 3

Retirer le href L'attribut semble définitivement la voie à suivre. Si, pour une raison quelconque, vous en avez besoin plus tard, je le stockerai simplement dans un autre attribut, par ex.

$(".my-link").each(function() {
    $(this).attr("data-oldhref", $(this).attr("href"));
    $(this).removeAttr("href");
});

C'est le seul moyen de faire en sorte que le lien apparaisse également désactivé sans avoir à écrire un CSS personnalisé. En liant simplement un gestionnaire de clic à false, le lien apparaîtra comme un lien normal, mais rien ne se produira lorsque vous cliquerez dessus, ce qui peut être déroutant pour les utilisateurs. Si vous optez pour le gestionnaire de clics, j'ajouterais au moins les éléments suivants .addClass("link-disabled") et écrivez une feuille de style en cascade qui fait apparaître les liens avec cette classe comme du texte normal.

Answer 4

$('.my-link').click(function(e) { e.preventDefault(); }); 

Vous pourriez utiliser :

$('.my-link').click(function(e) { return false; }); 

Mais je n'aime pas l'utiliser moi-même car il est plus cryptique, même s'il est largement utilisé dans une grande partie du code de jQuery.

Answer 5

function EnableHyperLink(id) {
        $('#' + id).attr('onclick', 'Pagination("' + id + '")');//onclick event which u 
        $('#' + id).addClass('enable-link');
        $('#' + id).removeClass('disable-link');
    }

    function DisableHyperLink(id) {
        $('#' + id).addClass('disable-link');
        $('#' + id).removeClass('enable-link');
        $('#' + id).removeAttr('onclick');
    }

.disable-link
{
    text-decoration: none !important;
    color: black !important;
    cursor: default;
}
.enable-link
{
    text-decoration: underline !important;
    color: #075798 !important;
    cursor: pointer !important;
}