选择字段和输入字段每个有值时启用禁用的提交按钮？答案

【问题标题】：Enable a Disabled Submit Button when both a Select field and Input field each have Values?选择字段和输入字段每个有值时启用禁用的提交按钮？
【发布时间】：2019-02-27 17:43:14
【问题描述】：

我喜欢这个网站，并且能够从你们那里学到很多东西。但是，这是一个我找不到答案的问题：

我有一个带有“选择”下拉菜单和一个带有禁用提交按钮的输入字段（两者都是必需的）的迷你表单。我的客户需要禁用/灰显提交按钮，直到填写这两个字段，但我无法使操作生效。

到目前为止，我提供的代码仅适用于 Input。我试图在初始函数中合并 "($('#selectBox').on('change', function() {" 以向 Select 字段发出信号，但它破坏了一切，我没有不知道该去哪里。

我认为每个字段都需要在 JQuery 代码中相互反弹/读取，以破译每个字段都有一个有效值，而不是让这些字段独立工作（我似乎一直在这样做）。但我正在努力寻找联系（我对 JS/JQ 还是很陌生 - 如果有错误，请原谅我的无知）。

我到处寻找解决方案，但我没有找到答案。如果我错过了可以帮助我的链接或以前的问题，请告诉我，感谢您的任何见解！

https://jsfiddle.net/jdraeger/2w68qs0y/2/

$(function() {
      $('#searchInput').keyup(function() {
      if ($(this).val() == '') {
          $('.enableOnInput').prop('disabled', true);
    } else {
          $('.enableOnInput').prop('disabled', false);
        }
      });
   })

<body>
  <div id='frame'>
    <div class='search'>
      <form method='post'>
        <select id="selectBox" class="selectBox" required>
          <option value="">--Select--</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <input type='text' name='searchQuery' id='searchInput' required/>
        <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
      </form>
    </div>
  </div>
</body>

【问题讨论】：

标签： jquery form-submit disabled-control submit-button

【解决方案1】：

两个字段和两个事件...

您可以为此编写一个“处理程序”。只需使用.on() 方法，它允许绑定许多事件（keyup 和change 这里）。然后，在比较中，检查两个值。如果一个或为空，请禁用该按钮。

$(function() {
  $('#searchInput, #selectBox').on('keyup change',function() {
    if ($('#searchInput').val() == '' || $('#selectBox').val() == '') {
      $('.enableOnInput').prop('disabled', true);
    } else {
      $('.enableOnInput').prop('disabled', false);
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id='frame'>
    <div class='search'>
      <form method='post'>
        <select id="selectBox" class="selectBox" required>
          <option value="">--Select--</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <input type='text' name='searchQuery' id='searchInput' required/>
        <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
      </form>
    </div>
  </div>
</body>

这甚至可以写得更短，通过将条件直接放在.prop() 的真/假第二个参数中：

$(function() {
  $('#searchInput, #selectBox').on('keyup change',function() {
    $('.enableOnInput').prop('disabled', ($('#searchInput').val() == '' || $('#selectBox').val() == ''));
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id='frame'>
    <div class='search'>
      <form method='post'>
        <select id="selectBox" class="selectBox" required>
          <option value="">--Select--</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <input type='text' name='searchQuery' id='searchInput' required/>
        <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
      </form>
    </div>
  </div>
</body>

【讨论】：

感谢您的帮助！两个版本都运行良好 :) 我很欣赏更简洁的编码版本，虽然我发现更长的版本更容易从语法上阅读理解流程（同样，我仍在学习这种语言）。再次感谢您抽出宝贵时间提供帮助！

【解决方案2】：

您可以通过创建一个新函数来实现这一点，该函数将启用您的提交按钮，并在文本输入字段更改或选择字段更改时调用

$('#selectBox','#searchInput').on('change', function() {
 enablingFunction();
 });

function enablingFunction(){
  if($('#selectBox').val() != "" && $('#searchInput').val() != ""){
    $('#submitBtn').prop("disabled", false);
   }
}

【讨论】：