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

$("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");
  }
});

Answer 2

我只会在必要时进行验证（并警告禁用的原因）：

<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

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

2 个答案: