检查输入和选择是否不为空并启用按钮

Question

我有许多输入的表格列表，并在过滤器选项中进行选择。检查此字段是否有内容的目标（例如输入不为空，并且 select 已选择选项）。我不明白如何使它与这些元素中的一个以上一起工作，因为现在如果两个输入具有值并且一个输入要清除，尽管其中一个输入具有值，但它会将按钮设置为禁用。帮我处理一下。

function buttonStatus() {
  var buttonDisable = function(){
    $('input[type="submit"]').attr('disabled', true)
  },
      buttonEnable = function(){
        $('input[type="submit"]').attr('disabled', false);
      }

  $('input').on('keyup change', function(){
    var inputText = $.trim($('input').val())
    if(inputText.length > 0 || $('select option').is(':selected') && $('select option:selected').val() != 0) {
      buttonEnable()
    }
    else {
      buttonDisable()
    }
  })

  $('select').on('keyup change', function(){
    if ($('option').is(':selected') && $('option:selected').val() != 0 || $.trim($('input').val()).length > 0) {
      buttonEnable()
    }
    else {
      buttonDisable()
    }
  })
}

buttonStatus()

* {
  box-sizing: border-box;
}

div {
  margin: 50px;
}

input[type="submit"] {
  background: green;
  border: none; 
  padding: 5px;
  color: #fff;
}

input[type="submit"][disabled] {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" />
  <input type="text" />
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <input type="submit" disabled>
</div>

Answer 1

您需要使用each 迭代所有输入和选择，并检查它们的值是否不等于0 或''。

像这样：

function buttonStatus() {
  var buttonDisable = function() {
    $('input[type="submit"]').attr('disabled', true)
  },
      buttonEnable = function() {
        $('input[type="submit"]').attr('disabled', false);
      }

  var elements = $('input[type="text"], select').on('keyup change', function() {
    var valid = false;
    
    elements.each(function() {
      var elm = $(this),
          val = elm.val();
      
      if ((val != '0' && elm.is('select')) || (val != '' && elm.is('input'))) {
        valid = true;
        return false;
      }
    });

    if(valid) {
      buttonEnable()
    }
    else {
      buttonDisable();
    }
  })
}

buttonStatus()

* {
  box-sizing: border-box;
}

div {
  margin: 50px;
}

input[type="submit"] {
  background: green;
  border: none; 
  padding: 5px;
  color: #fff;
}

input[type="submit"][disabled] {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" />
  <input type="text" />
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <input type="submit" disabled>
</div>

Answer 2

您可以检查任何输入元素是否具有值，处理选择的情况，您可以检查selectedIndex：

$('div :input').on('input', function() {
  var $container = $(this).closest('div');
  var disabled = !$container.find(':input:not(:submit)').filter(function() {
    return this.value && ($(this).is('select') ? this.selectedIndex : true);
  }).length;  
  $container.find(':submit').prop('disabled', disabled);
});

* {
  box-sizing: border-box;
}
div {
  margin: 50px;
  }
input[type="submit"] {
  background: green;
  border: none; 
  padding: 5px;
  color: #fff;
}
input[type="submit"][disabled] {
  background: red;
    
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" />
  <input type="text" />
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <input type="submit" disabled>
</div>

Answer 3

通常我会尝试处理表单提交的验证。如果添加必需的属性，则可以使验证更容易。您可以在提交表单 id='formId' 时尝试类似这种方法。这是针对 Boostrap v3 表单的。

// On form submit
$('#formId').submit(function(e) {

    // Check all required fields before submit
    $('#formId').find('input, select, textarea').each(function() {
        var self = $(this);
        if (self.attr('required')) {
            if (self.parent().hasClass('input-group')) {
                if (!self.val()) {
                    // Add some display error fadeIn or Class Change here!
                    self.parent().parent().addClass('has-error');
                    self.parent().parent().find('span').fadeIn();
                } else {
                    // Add some display error fadeOut or Class Change here!
                    self.parent().parent().removeClass('has-error');
                    self.parent().parent().find('span').fadeOut();
                }
            } else {
                if (!self.val()) {
                    self.parent().addClass('has-error');
                    self.parent().find('span').fadeIn();
                } else {
                    self.parent().removeClass('has-error');
                    self.parent().find('span').fadeOut();
                }
            }
        }
    });

    // If has-error classes found, do not submit
    if ($('.has-error').length > 0) {
        // Prevent form default submit
        e.preventDefault();
    } else {
        if (spinner === false) {
            // Check out the JS Spinner.
            spinner = new Spinner().spin();
            $('#submit_button_div').prepend(spinner.el);
        }
    }

});

您可以将其更改为使用 on change 或 focus out 来查看所有表单字段，而不是在 Form Submit 上，但这可能会为您的页面添加大量 javascript 处理。

Answer 4

function buttonStatus() {
  var not_emp_inp = $('input:text').filter(function() { return $(this).val() != ""; });
  var not_emp_sel = $('select').filter(function() { return $(this).val() != "0"; });
  $('input[type="submit"]').attr('disabled', (not_emp_inp.length && not_emp_sel.length) ? false : true);
}

$('input,select').on('keyup change', function(){   buttonStatus();  });

FIDDLE