Question

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

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

你可以检查任何输入元素是否有值，处理select的情况你可以在哪里检查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 2

您需要迭代所有输入并使用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 3

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

Answer 4

通常我会尝试在表单提交上处理验证。如果添加必需的属性，则可以更轻松地进行验证。在提交表单id =＆＃39; formId＆＃39;时，您可以尝试更类似于此方法的内容。这是一个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);
        }
    }

});

而不是在表单提交上，您可以将其更改为使用更改或焦点注视所有表单字段，但这可能会为您的页面添加大量javascript处理。

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

4 个答案: