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

J'ai un lien d'ancrage que je souhaite désactiver une fois que l'utilisateur clique dessus. Ou supprimez la balise d'ancrage autour du texte, mais conservez définitivement le texte.

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

Je peux le faire facilement avec un bouton en ajoutant que .attr("disabled", "disabled");
j'ai ajouté avec succès la propriété désactivée, 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, il devrait simplement ajouter "Wrong" et ensuite devenir non cliquable.
Lorsque vous cliquez et que vous avez raison, il faut ajouter "Génial" puis désactiver toutes les <a>balises.

Je viens de réaliser ce que vous demandiez (j'espère). Voici une solution moche

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

La méthode la plus propre serait d'ajouter une classe avec des événements de pointeur: aucun lorsque vous souhaitez désactiver un clic. Cela fonctionnerait comme une étiquette normale.

.disableClick{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

Utilisez le style CSS pointeur-événements . (comme l'a suggéré Jason MacDonald)

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'ancrage fera l'affaire si vous avez une règle CSS globale comme suit:

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

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

ou

$('a').click(function(){ return false})

Cela dépend de la situation

Bootstrap nous fournit la .disabledclasse. Veuillez l'utiliser.

Mais la .disabledclasse ne fonctionne que lorsque la balise «a» a déjà la classe «btn». Cela ne fonctionne pas sur les anciennes balises «a». La btnclasse peut ne pas être appropriée dans certains contextes car elle a des connotations de style. Sous les couvertures, la .disabledclasse est définie pointer-eventssur none, vous pouvez donc faire en sorte que CSS fasse la même chose que Saroj Aryal et Vitrilo l'ont suggéré. (Merci, Les Nightingill pour ce conseil).

Ajouter une cssclasse:

.disable_a_href{
    pointer-events: none;
}

Ajoutez ceci jquery:

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

Supprimez simplement l' hrefattribut de la balise d'ancrage.

Le meilleur moyen est d'empêcher l'action par défaut. Dans le cas de la balise d'ancrage, le comportement par défaut est la redirection vers l' hrefadresse spécifiée.

Donc, le javascript suivant fonctionne mieux dans la situation:

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

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

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

Ou vous pouvez simplement utiliser autre chose qu'une <a>balise.

Les commentaires de Jason MacDonald ont fonctionné pour moi, testés dans Chrome, Mozila et IE.

Ajout de la couleur grise pour afficher l'effet de désactivation.

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery sélectionnait uniquement le premier élément de la liste d'ancrage, a ajouté un méta-caractère (*) pour sélectionner et désactiver tous les éléments avec un identifiant #ThisLink.

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

Écrivez ceci une seule ligne de code jQuery

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

si vous voulez écrire dans un fichier css

.hyperlink{
    pointer-events: none;
}

Créez la classe suivante dans la feuille de style:

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

Ajoutez cette classe à votre lien dynamiquement comme suit.

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

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

Essaye ça:

$('a').contents().unwrap();

Simplement dans SASS:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

C'est la méthode que j'ai utilisée pour désactiver. J'espère que cela aide.

$("#ThisLink").attr("href","javascript:;");

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

Ce serait une autre façon de faire cela, le gestionnaire avec return false, qui désactivera le lien, sera ajouté après un clic.

Le moyen le plus simple

Dans votre html:

<a id="foo" disabled="true">xxxxx<a>

Dans votre js:

$('#foo').attr("disabled", false);

Si vous l'utilisez comme attribut fonctionne parfaitement