如果输入和复选框不为空，则启用提交按钮 [英] Enable submit button if input and checkbox aren't empty
本文介绍了如果输入和复选框不为空，则启用提交按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面我试图确保在允许用户提交之前我的复选框和输入都已填写.它忽略我对复选框的检查，并在仅填写字段后打开提交.我做错了什么?
$('#first, #last, #pass').bind('keyup', function() {if (allFilled()) $('#register').removeAttr('disabled');});函数 allFilled() {变量填充 = 真；console.log($('#checkbox').prop('checked'))$('body input').each(function() {if ($(this).val() == '' && $('#checkbox').prop('checked') == false) 填充 = false;});回填};html:
<表格>用户名<br/><input type="text" id="first" name="first"/><br/>第一的<br/><input type="text" id="last" name="last"/><br/>最后的<br/><input type="text" id="pass" name="pass"/><br/>密码<br/><input type="checkbox" class="checkbox" id="checkbox" name="checkbox"/><br/><input type="submit" id="register" disabled value="Register"/></表单><div id="测试"> 解决方案
从 jQuery 3.0 开始，.bind() 已被弃用.自 jQuery 1.7 起，它被用于将事件处理程序附加到文档的 .on() 方法取代，因此已经不鼓励使用它.
$('#first, #last, #pass').on('keyup', function() {if (allFilled()) $('#register').removeAttr('disabled');});希望这会有所帮助.
$('#first, #last, #pass').on('keyup', function() {if (allFilled()) $('#register').removeAttr('disabled');});函数 allFilled() {var 填充 = 真；$('body input').each(function() {if ($(this).val() == '' && $('#checkbox').prop('checked') == false) 填充 = false;});回填};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><表格>用户名<br/><input type="text" id="first" name="first"/><br/>第一的<br/><input type="text" id="last" name="last"/><br/>最后的<br/><input type="text" id="pass" name="pass"/><br/>密码<br/><input type="checkbox" class="checkbox" id="checkbox" name="checkbox"/><br/><input type="submit" id="register" disabled value="Register"/></表单><div id="测试">Below I am trying to ensure that my checkbox and inputs are all filled before allowing user to submit. It ignores my check on the checkbox and opens up the submit after the fields only are filled. What am I doing wrong?
$('#first, #last, #pass').bind('keyup', function() {
if (allFilled()) $('#register').removeAttr('disabled');
});
function allFilled() {
var filled = true;
console.log($('#checkbox').prop('checked'))
$('body input').each(function() {
if ($(this).val() == '' && $('#checkbox').prop('checked') == false) filled = false;
});
return filled
};
html:
<body>
<form>
Username
<br />
<input type="text" id="first" name="first" />
<br /> First
<br />
<input type="text" id="last" name="last" />
<br /> Last
<br />
<input type="text" id="pass" name="pass" />
<br /> Password
<br />
<input type="checkbox" class="checkbox" id="checkbox" name="checkbox" />
<br />
<input type="submit" id="register" disabled value="Register" />
</form>
<div id="test">
</div>
</body>
解决方案
As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.
Please don't use the deprecated method bind() use on() instead :
$('#first, #last, #pass').on('keyup', function() {
if (allFilled()) $('#register').removeAttr('disabled');
});
Hope this helps.
$('#first, #last, #pass').on('keyup', function() {
if (allFilled()) $('#register').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if ($(this).val() == '' && $('#checkbox').prop('checked') == false) filled = false;
});
return filled
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Username
<br />
<input type="text" id="first" name="first" />
<br /> First
<br />
<input type="text" id="last" name="last" />
<br /> Last
<br />
<input type="text" id="pass" name="pass" />
<br /> Password
<br />
<input type="checkbox" class="checkbox" id="checkbox" name="checkbox" />
<br />
<input type="submit" id="register" disabled value="Register" />
</form>
<div id="test">
</div>
这篇关于如果输入和复选框不为空，则启用提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
