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

Simplement en SASS :

.some_class{
     // styles...

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

Answer 2

Ne jamais faire confiance le navigateur, car l'utilisateur peut modifier la page de n'importe quelle manière à l'insu du serveur.

Si un lien ne doit fonctionner qu'une seule fois, la première chose à faire est la suivante s'assurer que, côté serveur, le clic n'est accepté qu'une seule fois (avec un jeton à usage unique spécifié comme chaîne de requête par exemple), car l'URL présent dans l'attribut href peut être copié par l'utilisateur et inséré dans la barre de navigation du navigateur et exécuté plusieurs fois.

Du côté du javascript, la chose la plus sûre que vous puissiez faire est de remplacer complètement l'élément <a> avec une autre balise, en préservant le contenu :

/** Replace element, preserving attributes and moving descendant nodes from the previous one.
 *
 * @param {HTMLElement} element Element to be replaced changing tag.
 * @param {String} new_tag New element tag.
 * @return {HTMLElement} New created element.
 */
function rename_element_tag(element, new_tag) {
    let new_block = document.createElement(new_tag);
    for (let j = 0; j < element.attributes.length; ++j)
        new_block.setAttribute(element.attributes[j].name, element.attributes[j].value);

    $(new_block).insertAfter(element);
    while (element.childNodes.length > 0)
        new_block.appendChild(element.childNodes[0]);

    $(element).remove();

    return new_block;
}

Cette fonction remplace l'élément passé en "modifiant" la balise, et préserve les attributs et le contenu en itérant tous les nœuds enfants via vanilla javascript au lieu de jQuery pour gérer également les nœuds de texte.

Dans votre cas, vous devez sauter le href attribut.

Answer 3

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

Il s'agit d'une autre façon de procéder, le gestionnaire avec return false qui désactivera le lien, sera ajouté après un clic.

Answer 4

Le moyen le plus simple

Dans votre html :

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

Dans vos js :

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

Si vous l'utilisez comme attribut, il fonctionne parfaitement