jQuery rileva clic sul pulsante di invio disabilitato

Fiddle: http://jsfiddle.net/ugzux/

Come puoi vedere, ho un modulo con un pulsante di invio disabilitato (tramite javascript).

Voglio essere in grado di associare un evento click ad esso in ogni caso, quindi posso fare qualche indicazione jazz di cosa deve essere corretto sull’input prima di consentire il modulo da inviare (cioè abilitare nuovamente il pulsante).

Tuttavia, la distriggerszione del pulsante di invio, inoltre, distriggers apparentemente qualsiasi evento di clic associato al pulsante, anche se sono rilegati dopo la distriggerszione – qualsiasi idea su come aggirare questo problema?

In pratica, una soluzione è smettere di disabilitare il pulsante e invece avere un evento che lo fa

$('form').submit(function(event){ event.preventDefault(); }); 

Tuttavia, desidero conoscere i dettagli degli input disabilitati e degli eventi javascript e se esistono soluzioni alternative che non ho mai riscontrato prima.

Trovato questo in questa domanda –

Firefox e forse altri browser, disabilitano gli eventi DOM nei campi modulo disabilitati. Qualsiasi evento che inizia nel campo modulo disabilitato viene completamente annullato e non si propaga sull’albero DOM. Correggetemi se ho torto, ma se clicchi sul pulsante disabilitato, l’origine dell’evento è il pulsante disabilitato e l’evento click viene completamente cancellato. Il browser non sa letteralmente che il pulsante è stato premuto, né passa l’evento click. È come se clicchi su un buco nero sulla pagina web.

Avevo pensato che potresti essere in grado di “falsificare” un clic avvolgendo il pulsante in un div e triggersndo la logica sull’evento click del div. Ma, come indicato sopra, gli eventi sugli elementi disabilitati non sembrano essere ribolliti dell’albero DOM.

Il modo migliore che ho trovato per farlo è usare una class “disabilitata” per disabilitare il pulsante. È quindi ansible rilevare gli eventi di clic normalmente in jQuery. Se $(this).hasClass('disabled') , fai le tue cose ‘indicazione jazzy’, insieme a event.preventDefault(); Una volta che l’utente ha fatto le sue cose, è ansible removeClass('disabled') input[type="submit"] ‘button’. Facile!

Puoi inserire un div attorno al pulsante di invio e albind una funzione di clic a quella per quando il pulsante di invio è disabilitato:

 
$('sub-div').click(function(event){ if (attr('submit-button', 'disabled') == 'true') { alert('Button Disabled') } });

Questo è solo il codice dalla cima della mia testa, quindi potrebbe non essere esattamente giusto. Ma hai capito il punto.

 $(document).on('click', '.wrapper-of-disabled-button', function(){ if ($(this).find('button.disabled').length > 0) { // Do your magic on the parent -> $(this) } }); 

Ecco qui 😉

Basta non disabilitare il pulsante, ma evita l’invio del modulo. Sembra che tu stia cercando di convalidare il modulo; quando lasci che JS prenda in consegna l’azione di invio e restituisca false, il modulo non sarà inviato

Un’altra soluzione alternativa con la combinazione di una casella di controllo richiesta potrebbe essere:

  
U need to check this box

CSS-Magic

 #submitButton{ display:inline-block; color:#D00019; width:160px; z-index:30; position:absolute; display:block; top:0; left:0; height:30px; outline:none; } #submitButton.nope{ z-index:10; color:#333; } .button_outer { width:162px; height:32px; z-index:50; position:relative; } span.button_overlay{ display:block; height:30px; width:162px; position:absolute; top:0; left:0; background:#fff; opacity:0.3; filter: alpha(opacity=30); z-index:20; } .einweilligung_hinweis_error{ color:red; } 

JQuery-Stuff

 (document).ready(function() { $('.einwilligung').click(function() { var buttonsChecked = $('.einwilligung:checked'); if (buttonsChecked.length) { $('#submitButton').removeAttr('disabled'); $('#submitButton').removeClass('nope'); $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error'); } else { $('#submitButton').attr('disabled', 'disabled'); $('#submitButton').addClass('nope'); } }); $('.button_outer').click(function(){ if($('#submitButton').hasClass('nope')){ $('.einwilligung_hinweis').addClass('einweilligung_hinweis_error'); }else{ $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error'); } }); }); 

Forse non lo stato dell’arte, ma funziona piuttosto bene!

  • la casella di controllo deve essere controllata per dare al pulsante di invio uno z-index più alto
  • in caso contrario, c’è il button_overlay sopra, con un evento click su di esso, per evidenziare il messaggio

Rendere il pulsante di readonly può essere d’aiuto, perché l’evento click sarà triggersto. Pur essendo consapevole delle differenze di comportamento .

  

Dovresti usare la class .disabled per disegnare l’elemento in modo che appaia disabilitato e poi gestirlo come desideri usando .hasClass (‘. Disabled’) nel tuo codice JS. Potrebbe funzionare fino a quando non hai messo “pointer-events: none;” dichiarazione nel codice css per la class .disabled