javascript - 我如何使用 jQuery 禁用表单的提交按钮，直到每个必填字段都已填写？

Question

我有一个包含多个输入、选择框和一个文本区域的表单。我希望禁用提交按钮，直到我指定为必填项的所有字段都填充了一个值。在它们全部填满后，如果 WAS 字段被用户删除，我希望提交按钮再次变回禁用状态。

我如何使用 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);
        }

    });
}

如果输入值已存储或您的其他代码正在填充数据，您可能还希望以这种方式在页面加载时添加对检查函数的调用，它仍然可以正常工作。

 inspectAllInputFields();

希望对您有所帮助，~马特