Question

我真的需要你的帮助，

所以我想要完成的是，即使输入框中没有文本，仍然会启用“搜索”按钮。所以我猜在密钥上，代码应检查任何和所有选定的当前值的选择框，如果没有，则禁用继续禁用搜索按钮。

但问题是，我不够精彩，无法正确编码。

这是一张照片：

以下是HTML标记：

window.onload = function() {
  $(document).on('change', 'select', function() {

    if (this.value.length > 0) {
      $('#search').prop('disabled', false)
    } else {
      $('#search').prop('disabled', true)
    }

  });

  $(document).on('change keyup', 'input', function() {

    if (this.value.length > 0) {
      $('#search').prop('disabled', false)
    } else {
      $('#search').prop('disabled', true)
    }
  });

}

<!DOCTYPE html>

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript">
  </script>

</head>

<body>
  Cars
  <select id="car">
    <option value=""></option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <br>
  <br>Fruits
  <select id="fruits">
    <option value=""></option>
    <option value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="pear">pear</option>
    <option value="strawberry">strawberry</option>
    <option value="mango">mango</option>
    <option value="orange">orange</option>
  </select>
  <br>
  <br>Vegetable
  <input type="input" id="veggie">
  <br>
  <br>Number
  <input type="input" id="number">
  <br>
  <br>
  <input type="button" value="search" id="search" disabled>

</body>

</html>

Answer 1

试试这个：https://jsfiddle.net/bb70t83u/

我删除了你的两个函数并放入了文档就绪函数。我只为select做了。您可以对input执行相同的操作。如果您需要帮助，请告诉我。

这是基于我的想法。请澄清这是不是您正在寻找的。

JQuery的：

$(function() {
    $("select").on("change", function() {
    if (this.value.length > 0) {
        $('#search').prop('disabled', false)
    }
    else {
        $('#search').prop('disabled', true)
    }
  });
})

Answer 2

在任何用户操作上验证整个表单

＆＃13;

window.onload = function() {
  var validateForm = function() {
    return $(':input').filter(function() {
      return this.value === '';
    }).length;
  }
  $(document).on('change keyup', ':input', function() {
    $('#search').prop('disabled', validateForm());
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Cars
<select id="car">
  <option value=""></option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<br>Fruits
<select id="fruits">
  <option value=""></option>
  <option value="apple">apple</option>
  <option value="banana">banana</option>
  <option value="pear">pear</option>
  <option value="strawberry">strawberry</option>
  <option value="mango">mango</option>
  <option value="orange">orange</option>
</select>
<br>
<br>Vegetable
<input type="input" id="veggie">
<br>
<br>Number
<input type="input" id="number">
<br>
<br>
<input type="button" value="search" id="search" disabled>

＆＃13;

Answer 3

尝试将代码包装在$(document).ready()函数中。

<script>

$(document).ready(function(){
    $(document).on('change', 'select', function() {

      if (this.value.length > 0 || $('input').value.lenght > 0) {
        $('#search').prop('disabled', false)
      } else {
        $('#search').prop('disabled', true)
      }

  });

  $(document).on('change keyup', 'input', function() {

    if (this.value.length > 0 || $('select').value.lenght > 0) {
      $('#search').prop('disabled', false)
    } else {
      $('#search').prop('disabled', true)
    }
  });
})
</script>
<!--- Just before body tag --->
</body>

DEMO

如果选项仍然存在但按钮输入框为空，则按钮仍会禁用

3 个答案: