禁用按钮，直到输入和文件字段获得值

Question

我这里有一个表格：

<form action="#" method="post">
Text: <input type="type" name="text" id="text" /><br />
File: <input type="file" name="fileInput" id="fileInput" /><br />
<select name="cars">
<option value="volvo">1</option>
<option value="saab">2</option>
<option value="mercedes">3</option>
<option value="audi">4</option>
</select><br />
<input type="submit" value="submit" disabled />
</form>
<div id="result"></div>

我想禁用提交按钮，直到所有字段（包括下拉菜单）都被填写或选择。

我的代码是：

$(document).ready(
 function() {
                $('form > input').keyup && $('input:file').change(function() {
                  var empty = false;
                  $('form > input').each(function() {
                   if ($(this).val() == '') {
                   empty = true;
                   }
                   });

                    if (empty) {
                  $('#submit').attr('disabled', 'disabled');
                  } else {
                 $('#submit').removeAttr('disabled');
                  }
                   });
                  };
function(){
    $('input:file').change(
        function(){
            if ($(this).val()) {
                $('input:submit').attr('disabled',false); 
            } 
        }
        );
});

当输入有一些文本，下拉有一个值并且输入类型有一个文件被选择时，请帮助激活按钮。

我的小提琴在这里：http://jsfiddle.net/E42XA/214/

谢谢。

Answer 1

我只会在必要时验证（并警告为什么禁用）：

<input id='mySUBMIT' type="button" value="submit"/>

Safari 选择第一个 <option> 而不实际单击一个，所以我也将添加为第一个：<option value=""></option>

JS：

$('#mySUBMIT').bind('click', function() {
    var blanks = $('form').find('select,input:not(:button)').filter(function () {
         return ($(this).val() == '');
    });
    if (blanks && blanks.length > 0) { alert("All fields MUST be filled out/selected!"); }
    else { $("form").submit(); }
});

UPDATED FIDDLE

Answer 2

$("form > *").change(function() {
  var fields = $("form input, form select").not("input[type='submit']");
  var filledFields = fields.filter(function() {
    return $(this).val().length > 0;
  });
  if (filledFields.length == fields.length) {
    $("input[type='submit']").removeAttr("disabled");
  } else {
    $("input[type='submit']").attr("disabled", "disabled");
  }
});