禁用提交button，直到所有字段都有值
我想要禁用我的提交button，直到所有的字段都有值。我该怎么做？
<html> <head> <title></title> <style type="text/css"> </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#register').attr("disabled", true); }); </script> </head> <body> <form> Username<br /> <input type="text" id="user_input" name="username" /><br /> Password<br /> <input type="text" id="pass_input" name="password" /><br /> Confirm Password<br /> <input type="text" id="v_pass_input" name="v_password" /><br /> Email<br /> <input type="text" id="email" name="email" /><br /> <input type="submit" id="register" value="Register" /> </form> <div id="test"> </div> </body> </html> 看看这个jsfiddle 。
HTML
// note the change... I set the disabled property right away <input type="submit" id="register" value="Register" disabled="disabled" />
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 } }); })()
关于这一点的好处是，不pipe你在表单中有多less个input字段，如果至less有一个是空的，它总是保持禁用button。 它还检查.keyup()上的.keyup() ，我认为它使可用性更方便。
$('#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与你的代码 ，工作:)
所有variables都被caching，所以循环和keyup事件不必每次运行时都创build一个jQuery对象。
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'); });
对于所有解决scheme而不是“.keyup”，“.change”应该被使用，否则当某人只select存储在cookie中的任何文本字段的数据时，提交button将不会被禁用。
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); })
严重挖掘…我喜欢不同的方法：
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)
我重构了所选的答案，并对其进行了改进。 所选的答案只适用于假设你每页有一个表单。 我解决了同一页上的多个表单（在我的情况下，我在同一页上有两个模态），我的解决scheme只检查所需字段的值。 如果JavaScript被禁用，我的解决scheme会优雅地降级，并且包含一个漂亮的CSSbutton淡入转换。
看到工作JS小提琴的例子： 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
<h4>Sign Up</h4> <form id="sign_up_user" data-empty="" action="#" method="post"> <input type="email" name="email" placeholder="Email" required> <input type="password" name="password" placeholder="Password" required> <input type="password" name="password_confirmation" placeholder="Password Confirmation" required> <input type="hidden" name="secret" value="secret"> <input type="submit" value="signup"> </form> <h4>Login</h4> <form id="login_user" data-empty="" action="#" method="post"> <input type="email" name="email" placeholder="Email" required> <input type="password" name="password" placeholder="Password" required> <input type="checkbox" name="remember" value="1"> remember me <input type="submit" value="signup"> </form>
