Come abilitare o disabilitare un ancoraggio usando jQuery?


150

Come abilitare o disabilitare un ancoraggio usando jQuery?


Grazie per la tua risposta, continua a non funzionare, quindi puoi farlo funzionare con document.ready funzione
Senthil Kumar Bhaskaran

Potrebbe essere utile se pubblichi lo snippet di codice che non funziona.
Evviva Sto aiutando il

In realtà la mia codifica è in Rails e la mia codifica è <% = foo.add_associated_link ('Aggiungi e-mail', @ project.email.build)%> quando lo rendo nel browser posso vedere l'e-mail ma non riesco a disabilitarlo nemmeno io provato con codici come e.preventDefault () ma senza risultati
Senthil Kumar Bhaskaran,

Risposte:


194

Per evitare che un'ancora segua quanto specificato href, suggerirei di usare 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();
    });
});

Vedere:

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

Vedi anche questa domanda precedente su SO:

jQuery disabilita un collegamento


Ho provato con quelli "attr" che funziona solo sull'elemento del modulo e non sul tag Anchor.
Senthil Kumar Bhaskaran,

1
@senthil - preventDefault è considerato il modo 'corretto' di fare questo, vedi la mia modifica (link ad un'altra Q + A)
karim79

In realtà la mia codifica è in Rails e la mia codifica è <% = foo.add_associated_link ('Aggiungi e-mail', @ project.email.build)%> quando lo rendo nel browser posso vedere l'e-mail ma non riesco a disabilitarlo nemmeno io provato con codici come e.preventDefault () ma senza risultati
Senthil Kumar Bhaskaran,

2
come faccio a invertire $('a.something').on("click", function (e) { e.preventDefault(); });?
ア レ ッ ク ス

2
Non sono d'accordo, utilizzare CSS "pointer-events: none;" invece, proprio come in altre risposte.
vitrilo,

116

L'app su cui sto attualmente lavorando lo fa con uno stile CSS in combinazione con JavaScript.

a.disabled { color:gray; }

Quindi ogni volta che voglio disabilitare un collegamento che chiamo

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

Quindi, nel gestore dei clic per "pensare" un tag, eseguo sempre un controllo per prima cosa

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

6
L'ultima riga non dovrebbe dire "return false;"?
Prestaul,

1
Buona chiamata, Prestaul. Se collegato a un tag <a>, sto usando: <a href="whatever" onclick="return disableLink(this)"> .. quindi: function disableLink (node) {if (dojo.hasClass (node, 'disabled') return false; dojo.addClass (node, 'disabled'); return true;} .. questo permette al link di essere cliccato una volta e azione (return true) e successivamente non consente l'azione (restituisce falso).
Neek

Nota che nel gestore dovresti probabilmente usare $ (questo) invece di $ ("pensare") poiché ciò potrebbe cambiare o l'utente potrebbe così facilmente copiare / incollare il codice.
Alexis Wilke,

2
Suggerire di aggiungere anche 'cursore: impostazione predefinita' allo stile disabilitato.
Stuart Hallows,

40

Ho trovato una risposta che mi piace molto meglio qui

Somiglia a questo:

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

L'abilitazione comporterebbe l'impostazione dell'attributo href

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

Questo ti dà l'impressione che l'elemento di ancoraggio diventi testo normale e viceversa.


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

}); 

12

Penso che una soluzione migliore sia quella di attivare l'attributo di dati disabilitato e ancorare un controllo per esso al clic. In questo modo possiamo disabilitare temporaneamente un ancoraggio fino a quando ad esempio il javascript non è terminato con una chiamata Ajax o alcuni calcoli. Se non lo disabilitiamo, possiamo fare clic rapidamente alcune volte, il che è indesiderabile ...

$('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;
});

Ho fatto un esempio di jsfiddle: http://jsfiddle.net/wgZ59/76/


11

La risposta selezionata non è buona.

Usa lo stile CSS puntatore-eventi . (Come suggerì Rashad Annara)

Vedi MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . È supportato nella maggior parte dei browser.

La semplice aggiunta dell'attributo "disabilitato" all'ancoraggio farà il lavoro se si dispone di una regola CSS globale come la seguente:

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

Inoltre, con gli eventi puntatore non sarà necessario includere lo stato: hover poiché si tratta di un evento puntatore. Devi solo includere il selettore a [disabilitato].
Larry Dukek,

10

Prova le righe seguenti

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

Perché, anche se si disabilita il <a>tag hreffunzionerà, quindi è necessario rimuovere hrefanche.

Quando si desidera abilitare, provare sotto le righe

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

1
Questo è esattamente ciò di cui avevo bisogno quando utilizzavo JQuery con ASP.net MVC ActionLink. Grazie!
eaglei22,

8

È semplice come return false;

ex.

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

o

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

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

Nel file CSS

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

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

Se viene chiamato questo metodo, l'azione predefinita dell'evento non verrà attivata.




1

Per le situazioni in cui è necessario inserire contenuto di testo o html all'interno di un tag di ancoraggio, ma semplicemente non si desidera intraprendere alcuna azione quando si fa clic su quell'elemento (come quando si desidera che un link paginator sia nello stato disabilitato perché è la pagina corrente), semplicemente tagliare l'href. ;)

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

La risposta di @ michael-meadows mi ha suggerito, ma il suo stava ancora affrontando scenari in cui devi ancora / stai lavorando con jQuery / JS. In questo caso, se hai il controllo sulla scrittura dell'html stesso, basta semplicemente x-ing il tag href è tutto ciò che devi fare, quindi la soluzione è pura HTML!

Altre soluzioni senza il finagling di jQuery che mantengono l'href richiedono di inserire un # nell'href, ma ciò fa sì che la pagina rimbalzi in alto e desideri solo che sia disabilitata. O lasciarlo vuoto, ma a seconda del browser, che fa ancora cose come saltare all'inizio, e non è un HTML valido secondo gli IDE. Ma a quanto pare un atag è HTML totalmente valido senza un HREF.

Infine, potresti dire: Okay, perché non scaricare del tutto il tag di? Poiché spesso non è possibile, il atag viene utilizzato per scopi di stile nel framework CSS o nel controllo che stai utilizzando, come il paginatore di Bootstrap:

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


1

Quindi, con una combinazione delle risposte sopra, ho pensato a questo.

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

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

0

Se non ti serve per comportarsi come un tag di ancoraggio, preferirei sostituirlo affatto. Ad esempio se il tuo tag di ancoraggio è simile

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

quindi utilizzando jquery è possibile farlo quando è necessario visualizzare il testo anziché un collegamento.

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

In questo modo, possiamo semplicemente sostituire il tag di ancoraggio con un tag div. Questo è molto più semplice (solo 2 righe) e anche semanticamente corretto (perché non abbiamo bisogno di un link ora quindi non dovremmo avere un link)


0

Disabilita o abilita qualsiasi elemento con la proprietà disabilitata.

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

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

Perché questa risposta è stata votata? Risponde alla domanda "Come abilitare o disabilitare un anchor usando jQuery?"
RitchieD

Credo che sia perché i collegamenti si aprono ancora quando si fa clic sull'ancora.
Zombaya,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.