Jak włączyć lub wyłączyć kotwicę za pomocą jQuery?

Jak włączyć lub wyłączyć kotwicę za pomocą jQuery?

Aby uniemożliwić kotwicy podążanie za określonym href, sugerowałbym użycie preventDefault():

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

Widzieć:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

Zobacz także to poprzednie pytanie na SO:

jQuery wyłącz link

Aplikacja, nad którą obecnie pracuję, obsługuje styl CSS w połączeniu z JavaScriptem.

a.disabled { color:gray; }

Wtedy, gdy chcę wyłączyć łącze, dzwonię

$('thelink').addClass('disabled');

Następnie w module obsługi kliknięcia dla tagu „thelink” zawsze najpierw sprawdzam

if ($('thelink').hasClass('disabled')) return;

Znalazłem odpowiedź, że lubię dużo lepiej tutaj

Wygląda tak:

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

Włączenie wymagałoby ustawienia atrybutu href

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

Daje to wygląd, że element zakotwiczenia staje się zwykłym tekstem i odwrotnie.

$("a").click(function(){
                alert('disabled');
                return false;

}); 

Myślę, że lepszym rozwiązaniem jest ustawienie wyłączonego atrybutu danych i zakotwiczenie sprawdzania go po kliknięciu. W ten sposób możemy tymczasowo wyłączyć kotwicę do czasu, gdy np. Javascript zostanie zakończone wywołaniem Ajax lub innymi obliczeniami. Jeśli jej nie wyłączymy, to możemy szybko w nią kliknąć kilka razy, co jest niepożądane ...

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

Zrobiłem przykład jsfiddle: http://jsfiddle.net/wgZ59/76/

Wybrana odpowiedź nie jest dobra.

Użyj stylu CSS wskaźnika zdarzeń . (Jak zasugerował Rashad Annara)

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 zakotwiczenia wykona zadanie, jeśli masz globalną regułę CSS, taką jak:

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

Wypróbuj poniższe linie

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Bo nawet jeśli wyłączysz <a>tag hrefbędzie działał, więc musisz hrefrównież usunąć .

Jeśli chcesz włączyć, spróbuj poniżej linii

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

To tak proste, jak return false;

dawny.

jQuery("li a:eq(0)").click(function(){
   return false;
})

lub

jQuery("#menu a").click(function(){
   return false;
})

$('#divID').addClass('disabledAnchor');

W pliku css

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}

$("a").click(function(event) {
  event.preventDefault();
});

W przypadku wywołania tej metody domyślna akcja zdarzenia nie zostanie wyzwolona.

Jeśli próbujesz zablokować wszelką interakcję ze stroną, możesz zajrzeć do wtyczki jQuery BlockUI

Nigdy tak naprawdę nie sprecyzowałeś, w jaki sposób chcesz je wyłączyć lub co spowodowałoby wyłączenie.

Po pierwsze, chcesz dowiedzieć się, jak ustawić wartość na wyłączone, w tym celu użyjesz funkcji atrybutów JQuery i sprawisz , że ta funkcja zostanie uruchomiona w przypadku zdarzenia , takiego jak kliknięcie lub załadowanie dokumentu.

W sytuacjach, w których musisz umieścić tekst lub zawartość html w tagu kotwicy, ale po prostu nie chcesz, aby w ogóle podejmowano jakiekolwiek działanie po kliknięciu tego elementu (np. Gdy chcesz, aby łącze paginatora było wyłączone, ponieważ jest bieżąca strona), po prostu wytnij href. ;)

<a>3 (current page, I'm totally disabled!)</a>

Odpowiedź @ michael-meadows dała mi wskazówkę, ale jego nadal dotyczyło scenariuszy, w których nadal musisz / pracujesz z jQuery / JS. W takim przypadku, jeśli masz kontrolę nad pisaniem samego kodu HTML, po prostu x -owanie znacznika href jest wszystkim, co musisz zrobić, więc rozwiązaniem jest czysty HTML!

Inne rozwiązania bez finaglingu jQuery, które zachowują href, wymagają umieszczenia # w href, ale to powoduje, że strona przeskakuje na górę i po prostu chcesz, aby była po prostu stara wyłączona. Lub pozostawienie go pustego, ale w zależności od przeglądarki, to nadal robi takie rzeczy, jak przeskakiwanie na górę i jest to nieprawidłowy HTML według IDE. Ale najwyraźniej atag jest całkowicie prawidłowym kodem HTML bez HREF.

Na koniec możesz powiedzieć: OK, dlaczego po prostu nie po prostu zrzucić tagu a w całości niż? Ponieważ często nie możesz tego zrobić, atag jest używany do celów stylizacji w ramach CSS lub kontrolce, której używasz, na przykład w paginatorze Bootstrap:

http://twitter.github.io/bootstrap/components.html#pagination

Tak więc, łącząc powyższe odpowiedzi, wymyśliłem to.

a.disabled { color: #555555; cursor: default; text-decoration: none; }

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 

Jeśli nie potrzebujesz, aby zachowywał się jak tag kotwicy, wolałbym go w ogóle zastąpić. Na przykład, jeśli twój tag kotwicy jest podobny do

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

następnie używając jquery możesz to zrobić, gdy chcesz wyświetlić tekst zamiast łącza.

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

W ten sposób możemy po prostu zastąpić tag anchor tagiem div. Jest to znacznie łatwiejsze (tylko 2 wiersze) i poprawne semantycznie (ponieważ nie potrzebujemy teraz linku, dlatego nie powinno mieć linku)

Wyłącz lub włącz dowolny element z wyłączoną właściwością.

// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );