javascript - 禁用按钮，除非特定字段有值

Question

我有一个 ASPX 表单，如果六个特定字段中的任何一个为空，我需要禁用提交按钮。我试图通过 Javascript 或 jQuery 来完成此操作，但到目前为止，我只能找到表单上的单个字段为空或表单上的所有字段的示例。就我而言，我不关心几个字段 - 只关心六个特定的字段。

基本上，我有六个条件和一个行动。我找到了一个例子，但它是将六个不同的 IF 语句串在一起。如果可能的话，我想找到一种更精简的方法。因此，例如，我可能会对单个字段执行此操作...但是如何对 field2、field3、field4 等执行此操作？

$(document).ready(function(){
  $('#submit_btn').prop('disabled',true); 
  $('#field1').keyup(function(){ 
      $('#submit_btn').prop('disabled'); 
  }) 
});

使用 Javascript 或 jQuery，如果六个输入字段中的任何一个为空，禁用输入按钮的最有效方法是什么？

Answer 1

您可以向所有元素添加相同的类名称，然后对每个类元素进行验证。就像下面的代码一样，我使用 class="valid" 将相同的类名添加到需要验证的所有输入，然后使用 jquery 类选择器 和用于控制按钮状态的 keyup 方法。

(function() {
    $('.valid').keyup(function() {

        var isEmpty = false;
        $('.valid').each(function() {
            if ($(this).val() == '') {
                isEmpty = true;
            }
        });

        if (isEmpty) {
            $('#button1').attr('disabled', 'disabled');
        } else {
            $('#button1').removeAttr('disabled');
        }
    });
})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    1<input type="text" class="valid" /><br />
  2<input type="text" class="valid" /><br />
  3<input type="text" class="valid" /><br />
  4<input type="text" class="valid" /><br />
  5<input type="text" class="valid" /><br />
  6<input type="text" class="valid" /><br />
    <input type="button" id="button1" value="Test Me!" disabled="disabled" />
</form>