web-dev-qa-db-fra.com

désactiver un lien hypertexte à l'aide de jQuery

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

J'ai fait

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

mais ça n'a pas marché

Existe-t-il un moyen simple de désactiver le lien hypertexte à l'aide de jQuery? Supprimer href? Je préférerais ne pas tripoter href. Donc, si je peux le faire sans supprimer href, ce serait génial.

jquerydisable-link
59
sarsnake

Vous pouvez lier un gestionnaire de clics renvoyant la valeur false:

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

Pour le réactiver, dissociez 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é cela en fournissant un raccourci à partir de jQuery 1.4.3:

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

Et pour dissocier/réactiver:

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

Je sais que c'est une vieille question mais elle semble toujours non résolue. Suit ma solution ...

Ajoutez simplement ce gestionnaire global:

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

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

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

par exemple

a[disabled]
{
    color: grey; 
}

Quoi qu'il en soit, il semble que l'attribut disabled ne soit pas valide pour les balises a. Si vous préférez suivre les spécifications W3c, vous pouvez facilement adopter un attribut data-disabled Conforme à html5. Dans ce cas, vous devez modifier le fragment précédent et utiliser $(this).data('disabled').

33
Luciano Mammino

Supprimer l'attribut href semble définitivement être la voie à suivre. Si, pour une raison quelconque, vous en avez besoin plus tard, je voudrais simplement le stocker dans un autre attribut, par exemple.

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

C’est la seule façon de le faire qui fera apparaître le lien désactivé sans écrire de code CSS personnalisé. Lier simplement un gestionnaire de clics à false fera en sorte que le lien apparaisse comme un lien normal, mais rien ne se passe lorsque vous cliquez dessus, ce qui peut prêter à confusion pour les utilisateurs. Si vous allez suivre la route du gestionnaire de clics, je voudrais au moins aussi .addClass("link-disabled") et écrire du code CSS qui fait en sorte que les liens avec cette classe apparaissent comme du texte normal.

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

Vous pouvez utiliser:

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

Mais je n'aime pas l'utiliser moi-même, car il est plus crypté, même s'il est largement utilisé dans beaucoup de code jQuery.

8
Neil

Le pointer-events La propriété CSS manque un peu en matière de support ( caniuse.com ), mais elle est très succincte:

.my-link { pointer-events: none; }
7
tiffon
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;
}
4
Abhishek Bandil

Ajouter une classe contenant des événements de type pointeur: non

.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}


$(this).addClass('active');
2
Andrien Pecson

L'attribut disabled n'est pas valide pour tous les éléments HTML, je crois, voir le article MSDN . Cela et la valeur appropriée pour désactivé est simplement "désactivé". Votre meilleure approche consiste à lier une fonction de clic qui renvoie false.

2
wsanville

Ci-dessous remplacera le lien par son texte

$('a').each(function () {
    $(this).replaceWith($(this).text());
});

Edit:

Le code ci-dessus fonctionnera avec des liens hypertexte avec du texte uniquement, il ne fonctionnera pas avec des images. Lorsque nous allons l'essayer avec un lien d'image, aucune image ne sera affichée.

Pour rendre ce code compatible avec les liens d’image suivants, cela fonctionnera correctement

// below given function will replace links with images i.e. for image links
$('a img').each(function () {
    var image = this.src;
    var img = $('<img>', { src: image });
    $(this).parent().replaceWith(img);
});

// This piece of code will replace links with its text i.e. for text links
$('a').each(function () {
    $(this).replaceWith($(this).text());
});

explication: Dans les extraits de code donnés ci-dessus, dans le premier extrait, nous remplaçons tous les liens d'image par ses images uniquement. Après cela, nous remplaçons les liens de texte par son texte.

1
IT ppl

Cela fonctionne aussi bien. Est simple, léger et ne nécessite pas l’utilisation de jQuery.

<a href="javascript:void(0)">Link</a>
0
Bradley Flood