Ultimamente, buttando giù qualche riga di JS e jQuery, mi sono imbattuto in una piccola “anomalia”, se così si può chiamare, presente in praticamente tutti i browser attualmente in circolazione.

Firefox, Chrome e molti altri browser, disabilitano gli eventi DOM su oggetti di form disabilitati. Qualsiasi evento che parte su un oggetto disabilitato viene completamente cancellato e non propagato su per l’albero del DOM.

DOM Tree

In parole povere, quando vedono un elemento del Form, con l’attributo disabled=”disabled” tendono a escluderlo completamente dal flusso di controllo DOM. Come fare dunque, ad esempio, a gestire un evento su un bottone di un form disabilitato?

Un metodo per avere su di esso un event handler è quello di aggiungere un attributo fittizio, non riconosciuto nativamente dal broser e gestire la cosa manualmente.

Facciamo un piccolo esempio:

Al caricamento della pagina, il pulsante non viene disabilitato nel modo classico. Quindi il pulsante è ancora attivo per il browser. Vogliamo sia disabilitato solo a livello “logico”, e procedere in maniera manuale. Vogliamo gestire su di esso un eventuale evento click da parte dell’utente.

$(document).ready(function() { 
 
$("#Submitform").attr('disabilitato', '1'); // disabilita bottone di invio aggiungendo un attributo fittizio che verrà controllato dalla funz sottostante
$("#Submitform").click(function() { //event handler del pulsante
if ($(this).attr('disabilitato') == 1){
$("#alert").html('Il pulsante è disabilitato!');
return false;
}else{
$("#alert").html('Il pulsante è attivo... invio della richiesta in corso!');
}
 
}
}

Restituire il controllo del bottone, e quindi renderlo clikkabile, è abbastanza semplice, ci basta rimuovere l’attributo fittizio creato per quell’oggetto, in questo modo:

$("#Submitform").removeAttr('disabilitato'); // abilitiamo bottone di invio