如何在填写每个必填字段之前使用jQuery来禁用表单的提交按钮？

Question

我有一个包含多个输入,选择框和textarea的表单.我希望禁用提交按钮,直到我指定的所有字段都填充了一个值.之后,他们都充满,应该这是一个字段的字段获得用户删除,我想提交按钮,再次回头禁用.

我怎样才能用jQuery实现这个目标？

Answer 1

猜测我的第一直觉是每当用户开始修改任何输入时运行一个函数.像这样的东西:

$('#submitBtn').prop('disabled', true);
$('.requiredInput').change(function() {
   inspectAllInputFields();
});

然后,我们将有一个检查每个输入的函数,如果它们已经过验证,则启用提交按钮......

function inspectAllInputFields(){
     var count = 0;
     $('.requiredInput').each(function(i){
       if( $(this).val() === '') {
           //show a warning?
           count++;
        }
        if(count == 0){
          $('#submitBtn').prop('disabled', false);
        }else {
          $('#submitBtn').prop('disabled', true);
        }

    });
}

如果存储了输入值,或者您的其他代码正在填充数据,它仍然可以在页面加载时以这种方式添加对inspect函数的调用,它仍将正常工作.

 inspectAllInputFields();

希望这有帮助,〜马特