Wie kann ein Ankerlink nicht angeklickt oder deaktiviert werden?

Ich habe einen Ankerlink, den ich deaktivieren möchte, sobald der Benutzer darauf klickt. Oder entfernen Sie das Ankertag um den Text, aber behalten Sie den Text auf jeden Fall bei.

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

Ich kann dies einfach mit einer Schaltfläche tun, indem .attr("disabled", "disabled");
ich die deaktivierte Eigenschaft erfolgreich hinzufüge, aber der Link war immer noch anklickbar.
Es ist mir egal, ob der Text unterstrichen ist oder nicht.

Irgendeine Ahnung?

Wenn Sie auf den falschen Musiker klicken, sollte er einfach "Falsch" hinzufügen und dann nicht mehr anklickbar sein.
Wenn Sie auf klicken und korrekt sind, sollte "Awesome" hinzugefügt und dann alle <a>Tags deaktiviert werden .

Ich habe gerade gemerkt, wonach Sie gefragt haben (ich hoffe). Hier ist eine hässliche Lösung

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;
});

Die sauberste Methode wäre, eine Klasse mit Zeigerereignissen hinzuzufügen: keine, wenn Sie einen Klick deaktivieren möchten. Es würde wie ein normales Etikett funktionieren.

.disableClick{
    pointer-events: none;
}

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

Verwenden Sie Zeiger-Ereignisse CSS - Stil. (wie Jason MacDonald vorgeschlagen hat)

Siehe MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Es wird in den meisten Browsern unterstützt.

Das einfache Hinzufügen des Attributs "deaktiviert" zum Anker erledigt den Job, wenn Sie eine globale CSS-Regel wie die folgende haben:

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

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

oder

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

Das hängt von der Situation ab

Bootstrap bietet uns .disabledKlasse. Bitte benutzen Sie es.

Die .disabledKlasse funktioniert jedoch nur, wenn das Tag 'a' bereits die Klasse 'btn' hat. Es funktioniert nicht mit einem alten 'a'-Tag. Die btnKlasse ist in einigen Kontexten möglicherweise nicht geeignet, da sie Stilkonnotationen hat. Unter der Decke .disabledsetzt die Klasse pointer-eventsauf none, sodass Sie CSS dazu bringen können, dasselbe zu tun, was Saroj Aryal und Vitrilo vorgeschlagen haben. (Danke, Les Nightingill für diesen Rat).

cssKlasse hinzufügen :

.disable_a_href{
    pointer-events: none;
}

Fügen Sie dies hinzu jquery:

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

Entfernen Sie einfach das hrefAttribut aus dem Ankertag.

Der beste Weg ist, die Standardaktion zu verhindern. Im Fall eines Ankertags wird standardmäßig auf umgeleitethref angegebene Adresse .

Das folgende Javascript funktioniert also am besten in der Situation:

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

Mit dem Ereignis onclick können Sie die Klickaktion deaktivieren:

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

Oder Sie könnten einfach etwas anderes als ein <a>Tag verwenden.

Die Kommentare von Jason MacDonald haben bei mir funktioniert und in Chrome, Mozila und IE getestet.

Graue Farbe hinzugefügt, um den Deaktivierungseffekt anzuzeigen.

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

Jquery wählte nur das erste Element in der Ankerliste aus und fügte ein Metazeichen (*) hinzu, um alle Elemente mit der ID auszuwählen und zu deaktivieren #ThisLink.

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

Schreiben Sie eine einzelne Zeile jQuery-Code

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

wenn Sie in CSS-Datei schreiben möchten

.hyperlink{
    pointer-events: none;
}

Erstellen Sie folgende Klasse im Stylesheet:

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

Fügen Sie diese Klasse wie folgt dynamisch zu Ihrem Link hinzu.

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

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

Versuche dies:

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

Einfach in SASS:

.some_class{
     // styles...

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

Dies ist die Methode, die ich zum Deaktivieren verwendet habe. Ich hoffe, es hilft.

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

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

Dies wäre eine andere Möglichkeit. Der Handler mit return false, der den Link deaktiviert, wird nach einem Klick hinzugefügt.

Der einfachste Weg

In Ihrem HTML:

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

In deinem js:

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

Wenn Sie es als Attribut verwenden, funktioniert es perfekt