我想禁用我的提交按钮,直到所有字段都有值..我该怎么做？
<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>
Hri*_*sto 88
看看这个jsfiddle.
// note the change... I set the disabled property right away
<input type="submit" id="register" value="Register" disabled="disabled" />
(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
}
});
})()
关于这一点的好处是,无论表单中有多少输入字段,如果至少有1个为空,它将始终保持按钮被禁用.它还检查空虚.keyup(),我认为它使可用性更方便.
rsp*_*lak 17
$('#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与您的代码,工作:)
所有变量都被缓存,因此循环和keyup事件不必在每次运行时创建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');
});
查看http://jsfiddle.net/DKNhx/3/上的工作示例
对于所有解决方案而不是".keyup"应该使用".change",否则当有人只选择存储在cookie中的任何文本字段的数据时,不会禁用提交按钮.
演示：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);
})
| 归档时间： |
|
| 查看次数： |
148879 次 |
| 最近记录： |