禁用jQuery提交按钮,直到填写完所有表单输入可以通过以下步骤实现:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
form-input
:<input type="text" class="form-input" />
$(document).ready(function() {
// 初始状态下禁用提交按钮
$('button[type="submit"]').prop('disabled', true);
// 监听表单输入的变化事件
$('.form-input').on('input', function() {
var allFilled = true;
// 检查是否所有表单输入都已经填写
$('.form-input').each(function() {
if ($(this).val() === '') {
allFilled = false;
return false; // 终止循环
}
});
// 根据填写状态启用或禁用提交按钮
$('button[type="submit"]').prop('disabled', !allFilled);
});
});
在上述代码中,我们使用了$(document).ready()
函数来确保页面加载完毕后再执行相关操作。首先,我们将提交按钮的disabled
属性设置为true
,使其处于禁用状态。然后,通过监听表单输入的input
事件,在每次输入发生变化时,检查所有表单输入的填写状态。如果所有表单输入都已经填写,则将提交按钮的disabled
属性设置为false
,启用提交按钮;否则,将其设置为true
,禁用提交按钮。
请注意,这只是一个基本的示例代码,你可以根据自己的实际需求进行修改和扩展。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云