Jak sprawić, by zakotwiczony link nie był klikalny lub był wyłączony?

Mam łącze kotwicy, które chcę wyłączyć, gdy użytkownik go kliknie. Lub usuń znacznik kotwicy z całego tekstu, ale zdecydowanie zachowaj tekst.

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

Mogę to łatwo zrobić za pomocą przycisku, dodając .attr("disabled", "disabled");
Pomyślnie dodałem wyłączoną właściwość, ale link nadal był klikalny.
Nie obchodzi mnie, czy tekst jest podkreślony, czy nie.

Jakaś wskazówka?

Kiedy klikniesz na niewłaściwego muzyka, powinien on po prostu dodać „Wrong” i stać się niemożliwym do kliknięcia.
Kiedy klikniesz i masz rację, powinien dodać „Niesamowite”, a następnie wyłączyć wszystkie <a>tagi.

Właśnie zdałem sobie sprawę, o co prosiłeś (mam nadzieję). Oto brzydkie rozwiązanie

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

Najczystszą metodą byłoby dodanie klasy ze zdarzeniami pointer: none, gdy chcesz wyłączyć kliknięcie. Funkcjonowałaby jak normalna etykieta.

.disableClick{
    pointer-events: none;
}

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

Użyj stylu CSS wskaźnika zdarzeń . (jak zasugerował Jason MacDonald)

Zobacz MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Jest obsługiwany w większości przeglądarek.

Proste dodanie atrybutu „wyłączony” do kotwicy wykona zadanie, jeśli masz globalną regułę CSS, taką jak:

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

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

lub

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

To zależy od sytuacji

Bootstrap zapewni nam .disabledklasę. Proszę, użyj go.

Ale .disabledklasa działa tylko wtedy, gdy znacznik „a” ma już klasę „btn”. Nie działa z żadnym starym znacznikiem „a”. btnKlasa nie może być odpowiednie w pewnym kontekście, jak to ma styl konotacje. Pod osłonami .disabledklasa ustawia się pointer-eventsna none, więc możesz sprawić, by CSS robił to samo, co sugerowali Saroj Aryal i Vitrilo. (Dziękuję Les Nightingill za tę radę).

Dodaj csszajęcia:

.disable_a_href{
    pointer-events: none;
}

Dodaj to jquery:

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

Po prostu usuń hrefatrybut z tagu kotwicy.

Najlepszym sposobem jest zapobieganie domyślnej akcji. W przypadku tagu kotwicy domyślnym zachowaniem jest przekierowanie na hrefpodany adres.

Zatem następujący javascript działa najlepiej w tej sytuacji:

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

Możesz użyć zdarzenia onclick, aby wyłączyć akcję click:

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

Lub możesz po prostu użyć czegoś innego niż <a>tag.

Komentarze Jason MacDonald działały dla mnie, testowane w Chrome, Mozila i IE.

Dodano szary kolor, aby pokazać efekt wyłączenia.

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

Jquery wybierał tylko pierwszy element na liście kotwic, dodał metaznak (*), aby zaznaczyć i wyłączyć wszystkie elementy o identyfikatorze #ThisLink.

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

Napisz to jeden wiersz kodu jQuery

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

jeśli chcesz pisać w pliku css

.hyperlink{
    pointer-events: none;
}

Utwórz następującą klasę w arkuszu stylów:

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

Dodaj tę klasę do linku dynamicznie w następujący sposób.

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

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

Spróbuj tego:

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

Po prostu w SASS:

.some_class{
     // styles...

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

To jest metoda, której użyłem do wyłączenia, mam nadzieję, że to pomaga.

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

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

Byłby to inny sposób na zrobienie tego, moduł obsługi return false, który wyłączy link, zostanie dodany po jednym kliknięciu.

Najłatwiejszy sposób

W Twoim html:

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

W twoim js:

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

Jeśli użyjesz go jako atrybutu, działa idealnie