Disabilitare il pulsante di invio fino a quando tutti i campi hanno valori

Voglio disabilitare il mio pulsante di invio fino a quando tutti i campi hanno valori .. come posso farlo?

       $(document).ready(function() { $('#register').attr("disabled", true); });    
Username

Password

Confirm Password

Email

Dai un’occhiata a questo jsfiddle .

HTML

 // note the change... I set the disabled property right away  

JavaScript

 (function() { $('form > input').keyup(function() { var empty = false; $('form > input').each(function() { if ($(this).val() == '') { empty = true; } }); if (empty) { $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie } else { $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie } }); })() 

La cosa bella di questo è che non importa quanti campi di input hai nel tuo modulo, manterrà sempre il pulsante disabilitato se c’è almeno 1 che è vuoto. Controlla anche il vuoto su .keyup() che, a mio avviso, lo rende più conveniente per l’usabilità.

 $('#user_input, #pass_input, #v_pass_input, #email').bind('keyup', function() { if(allFilled()) $('#register').removeAttr('disabled'); }); function allFilled() { var filled = true; $('body input').each(function() { if($(this).val() == '') filled = false; }); return filled; } 

JSFiddle con il tuo codice , funziona 🙂

Tutte le variabili sono memorizzate nella cache in modo che l’evento loop e keyup non debba creare un object jQuery ogni volta che viene eseguito.

 var $input = $('input:text'), $register = $('#register'); $register.attr('disabled', true); $input.keyup(function() { var trigger = false; $input.each(function() { if (!$(this).val()) { trigger = true; } }); trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled'); }); 

Guarda l’esempio di lavoro su http://jsfiddle.net/DKNhx/3/

Per tutte le soluzioni invece di “.keyup” è necessario utilizzare “.change” altrimenti il ​​pulsante di invio non verrà disabilitato quando qualcuno seleziona solo i dati memorizzati nei cookie per uno qualsiasi dei campi di testo.

DEMO: http://jsfiddle.net/kF2uK/2/

 function buttonState(){ $("input").each(function(){ $('#register').attr('disabled', 'disabled'); if($(this).val() == "" ) return false; $('#register').attr('disabled', ''); }) } $(function(){ $('#register').attr('disabled', 'disabled'); $('input').change(buttonState); }) 

Grave scavare … Mi piace un approccio diverso:

 elem = $('form') elem.on('keyup','input', checkStatus) elem.on('change', 'select', checkStatus) checkStatus = (e) => elems = $('form').find('input:enabled').not('input[type=hidden]').map(-> $(this).val()) filled = $.grep(elems, (n) -> n) bool = elems.size() != $(filled).size() $('input:submit').attr('disabled', bool) 

Ho rifattorato la risposta scelta qui e ho migliorato. La risposta scelta funziona solo assumendo che tu abbia un modulo per pagina. Ho risolto questo problema per più moduli sulla stessa pagina (nel mio caso ho 2 modali sulla stessa pagina) e la mia soluzione controlla solo i valori sui campi obbligatori. La mia soluzione si degrada dolcemente se JavaScript è disabilitato e include una transizione di dissolvenza dei pulsanti CSS slick.

Vedi l’esempio di JS fiddle funzionante: https://jsfiddle.net/bno08c44/4/

JS

 $(function(){ function submitState(el) { var $form = $(el), $requiredInputs = $form.find('input:required'), $submit = $form.find('input[type="submit"]'); $submit.attr('disabled', 'disabled'); $requiredInputs.keyup(function () { $form.data('empty', 'false'); $requiredInputs.each(function() { if ($(this).val() === '') { $form.data('empty', 'true'); } }); if ($form.data('empty') === 'true') { $submit.attr('disabled', 'disabled').attr('title', 'fill in all required fields'); } else { $submit.removeAttr('disabled').attr('title', 'click to submit'); } }); } // apply to each form element individually submitState('#sign_up_user'); submitState('#login_user'); }); 

CSS

 input[type="submit"] { background: #5cb85c; color: #fff; transition: background 600ms; cursor: pointer; } input[type="submit"]:disabled { background: #555; cursor: not-allowed; } 

HTML

 

Sign Up

Login

remember me