Come abilitare o disabilitare un ancoraggio usando jQuery?

Come abilitare o disabilitare un ancoraggio usando jQuery?

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

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;

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.

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

}); 

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/

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

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

È semplice come return false;

ex.

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

o

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

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

Nel file CSS

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

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

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

Se stai tentando di bloccare tutte le interazioni con la pagina, potresti voler consultare il plugin jQuery BlockUI

Non hai mai specificato come li volevi disabilitati o cosa avrebbe causato la disabilitazione.

Innanzitutto, vuoi capire come impostare il valore su disabilitato, per questo useresti le funzioni di attributo di JQuery e fare in modo che tale funzione si verifichi su un evento , come un clic o il caricamento del documento.

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

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

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)

Disabilita o abilita qualsiasi elemento con la proprietà disabilitata.

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

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