disabilitare un collegamento ipertestuale usando jQuery

Click me 

L’ho fatto

 $('.my-link').attr('disabled', true); 

ma non ha funzionato

C’è un modo semplice per disabilitare il collegamento ipertestuale usando jquery? Rimuovere href? Preferirei non giocherellare con href. Quindi, se posso farlo senza rimuovere href, sarebbe fantastico.

Puoi associare un gestore di clic che restituisce falso:

 $('.my-link').click(function () {return false;}); 

Per riabilitarlo di nuovo, separa il gestore:

 $('.my-link').unbind('click'); 

Notare che disabled non funziona perché è progettato solo per gli input dei moduli.


jQuery lo ha già anticipato, fornendo una scorciatoia da jQuery 1.4.3:

 $('.my-link').bind('click', false); 

E per dissipare / ritriggersre:

 $('.my-link').unbind('click', false); 

So che è una vecchia domanda ma sembra ancora irrisolto. Segue la mia soluzione …

Aggiungi semplicemente questo gestore globale:

 $('a').click(function() { return ($(this).attr('disabled')) ? false : true; }); 

Ecco una breve demo: http://jsbin.com/akihik/3

puoi persino aggiungere un po ‘di css per dare uno stile diverso a tutti i link con l’attributo disabilitato.

per esempio

 a[disabled] { color: grey; } 

Ad ogni modo sembra che l’attributo disabilitato non sia valido per a tag. Se si preferisce seguire le specifiche w3c, è ansible adottare facilmente un attributo data-disabled compatibile con html5. In questo caso devi modificare lo snippet precedente e usare $(this).data('disabled') .

Rimuovere l’attributo href sembra decisamente la strada da percorrere. Se per qualche ragione ne hai bisogno in seguito, lo memorizzerei in un altro attributo, ad es

 $(".my-link").each(function() { $(this).attr("data-oldhref", $(this).attr("href")); $(this).removeAttr("href"); }); 

Questo è l’unico modo per farlo che renderà il collegamento anche disabilitato senza scrivere CSS personalizzati. Basta associare un gestore di clic a falso per far apparire il link come un normale link, ma non succederà nulla quando si fa clic su di esso, il che potrebbe creare confusione per gli utenti. Se avete intenzione di seguire il percorso di click handler, vorrei almeno anche .addClass("link-disabled") e scrivere alcuni CSS che .addClass("link-disabled") apparire i collegamenti con quella class come normali testi.

 $('.my-link').click(function(e) { e.preventDefault(); }); 

Potresti usare:

 $('.my-link').click(function(e) { return false; }); 

Ma non mi piace usarlo da solo perché è più criptico, anche se è ampiamente utilizzato in molti codici jQuery.

La proprietà CSS degli pointer-events è un po ‘carente quando si tratta di supporto ( caniuse.com ), ma è molto succinta:

 .my-link { pointer-events: none; } 
 function EnableHyperLink(id) { $('#' + id).attr('onclick', 'Pagination("' + id + '")');//onclick event which u $('#' + id).addClass('enable-link'); $('#' + id).removeClass('disable-link'); } function DisableHyperLink(id) { $('#' + id).addClass('disable-link'); $('#' + id).removeClass('enable-link'); $('#' + id).removeAttr('onclick'); } .disable-link { text-decoration: none !important; color: black !important; cursor: default; } .enable-link { text-decoration: underline !important; color: #075798 !important; cursor: pointer !important; } 

L’attributo disabled non è valido su tutti gli elementi HTML, credo, vedere l’ articolo MSDN . Quello e il valore corretto per disabili è semplicemente “disabilitato”. Il tuo approccio migliore è quello di associare una funzione clic che restituisce false.

Aggiungi una class contenente eventi-puntatore: non

 .active a{ //css text-decoration: underline; background-color: #fff; pointer-events: none;} $(this).addClass('active'); 

Sotto sostituirà il link con il suo testo

 $('a').each(function () { $(this).replaceWith($(this).text()); }); 

Modificare :

Il codice sopra indicato funzionerà solo con i collegamenti ipertestuali, non funzionerà con le immagini. Quando lo proveremo con il collegamento dell’immagine, non mostrerà alcuna immagine.

Per rendere questo codice compatibile con i collegamenti alle immagini seguenti funzionerà correttamente

 // below given function will replace links with images ie for image links $('a img').each(function () { var image = this.src; var img = $('', { src: image }); $(this).parent().replaceWith(img); }); // This piece of code will replace links with its text ie for text links $('a').each(function () { $(this).replaceWith($(this).text()); }); 

spiegazione: nei frammenti di codice sopra riportati, nel primo frammento di codice stiamo sostituendo tutti i link immagine con le sue sole immagini. Successivamente, sostituiremo i collegamenti testuali con il suo testo.

Anche questo funziona bene. È semplice, lite e non richiede l’utilizzo di jQuery.

 Link 

Provare:

 $(this).prop( "disabled", true );