Comment rendre un lien d'ancrage non cliquable ou désactivé ?

Question

J'ai un lien d'ancrage que je veux désactiver une fois que l'utilisateur a cliqué dessus. Ou bien, supprimer la balise d'ancrage autour du texte, mais conserver le texte.

<a href='' id='ThisLink'>some text</a>

Je peux le faire facilement avec un bouton en ajoutant .attr("disabled", "disabled");
J'ai réussi à ajouter la propriété "disabled", mais le lien était toujours cliquable.
Je me fiche de savoir si le texte est souligné ou non.

Un indice ?

Lorsque vous cliquez sur le mauvais musicien, la mention "Mauvais" devrait être ajoutée et il ne devrait plus être possible de cliquer dessus.
Lorsque vous cliquez et que vous avez raison, le système devrait ajouter "Awesome" et désactiver tous les autres. <a> étiquettes.

Answer 1

Bootstrap nous fournit .disabled classe. N'hésitez pas à l'utiliser.

Mais .disabled ne fonctionne que si la balise "a" possède déjà la classe "btn". Elle ne fonctionne pas avec n'importe quelle balise "a". La classe btn peut ne pas être approprié dans certains contextes car il a des connotations stylistiques. Sous les couvertures, le .disabled ensembles de classes pointer-events a none Vous pouvez donc créer un CSS pour faire la même chose que ce que Saroj Aryal et Vitrilo ont suggéré. (Merci à Les Nightingill pour ces conseils).

Answer 2

Ajouter un css classe :

.disable_a_href{
    pointer-events: none;
}

Ajouter jquery :

$("#ThisLink").addClass("disable_a_href");

Answer 3

Écrire une seule ligne de code jQuery

$('.hyperlink').css('pointer-events','none');

si vous voulez écrire dans le fichier css

.hyperlink{
    pointer-events: none;
}

Answer 4

Le meilleur moyen est d'empêcher l'action par défaut. Dans le cas d'une balise d'ancrage, l'action par défaut est de rediriger vers href adresse spécifiée.

Le javascript suivant fonctionne donc mieux dans cette situation :

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

Answer 5

Vous pouvez utiliser l'événement onclick pour désactiver l'action du clic :

<a href='' id='ThisLink' onclick='return false'>some text</a>

Vous pouvez également utiliser autre chose qu'un <a> étiquette.