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


150

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


Dzięki za całą twoją odpowiedź, nadal nie działa, więc możesz sprawić, by działała z funkcją document.ready
Senthil Kumar Bhaskaran

Może pomóc, jeśli opublikujesz fragment kodu, który nie działa.
Hooray Im Helping

Właściwie moje kodowanie jest w Railsach, a moje kodowanie to <% = foo.add_associated_link ('Add email', @ project.email.build)%> kiedy renderuję go w przeglądarce, widzę e-mail, ale nie mogę go wyłączyć nawet próbował z kodowaniem takim jak e.preventDefault (), ale bez rezultatu
Senthil Kumar Bhaskaran

Odpowiedzi:


194

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


Próbowałem z tymi "attr", działa tylko na elemencie formularza, a nie na tagu Anchor.
Senthil Kumar Bhaskaran

1
@senthil - PreventDefault jest uważany za `` właściwy '' sposób na zrobienie tego, zobacz moją edycję (link do innego pytania + odpowiedzi)
karim79

Właściwie moje kodowanie jest w Railsach, a moje kodowanie to <% = foo.add_associated_link ('Add email', @ project.email.build)%> kiedy renderuję go w przeglądarce, widzę wiadomość e-mail, ale nie mogę jej wyłączyć nawet próbował z kodowaniem takim jak e.preventDefault (), ale bez rezultatu
Senthil Kumar Bhaskaran

2
jak mam odwrócić $('a.something').on("click", function (e) { e.preventDefault(); });?
ア レ ッ ク ス

2
Nie zgadzam się, użyj CSS "pointer-events: none;" zamiast tego, tak jak w innych odpowiedziach.
vitrilo

116

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;

6
Czy w ostatniej linii nie powinno być napisane „return false”?
Prestaul

1
Dobry telefon, Prestaul. Kiedy jestem powiązany z tagiem <a>, używam: <a href="whthing" onclick="return disableLink(this)"> .. then: function disableLink (node) {if (dojo.hasClass (node, 'disabled') return false; dojo.addClass (node, 'disabled'); return true;} .. umożliwia to jednokrotne kliknięcie odsyłacza i wykonanie akcji (powrót true), a następnie uniemożliwia wykonanie czynności (zwraca fałsz)
Neek,

Zwróć uwagę, że w module obsługi prawdopodobnie powinieneś użyć $ (this) zamiast $ ("thelink"), ponieważ może to ulec zmianie lub użytkownik mógłby w ten sposób łatwo skopiować / wkleić kod.
Alexis Wilke

2
Zaproponuj także dodanie „kursora: domyślny” do wyłączonego stylu.
Stuart Hallows

40

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.


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

}); 

12

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/


11

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

Również w przypadku zdarzeń pointer nie musisz uwzględniać stanu: hover, ponieważ jest to zdarzenie wskaźnika. Musisz tylko dodać selektor [wyłączony].
Larry Dukek,

10

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

1
Właśnie tego potrzebowałem, używając JQuery z ASP.net MVC ActionLink. Dzięki!
eaglei22

8

To tak proste, jak return false;

dawny.

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

lub

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

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

W pliku css

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

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

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




1

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


1

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

0

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)


0

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

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

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

Dlaczego ta odpowiedź jest odrzucona? Odpowiada na pytanie „Jak włączyć lub wyłączyć kotwicę za pomocą jQuery?”
RitchieD

Uważam, że dzieje się tak, ponieważ linki nadal otwierają się po kliknięciu kotwicy.
Zombaya
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.