如果任一输入为空，则 jQuery 禁用按钮

Question

默认情况下禁用按钮。有两个文本输入。如果其中一个为空，则表单应保持禁用状态。如果两个字段都有值，则应启用该按钮。

试试这个……

$(document).ready(function(){
    $('#custNameNext').prop('disabled',true);
    $('#customer').keyup(function(){
        $(this).val($(this).val().replace(/[^\w\s]+/g, ''));
        $('#custNameNext').prop('disabled', ((this.value == '') || ($('#customerCost').val() == '')) ? true : false);
    });
});

...但是 b/c 我在一个 keyup 中，除非我在两个字段中都有值，否则该按钮不会启用，然后返回到 keyup 的第一个字段并输入其他文本。

无法思考这个问题！

Answer 1

这应该适合你：

$(document).ready(function() {
  $('#custNameNext').prop('disabled', true);

  function validateNextButton() {
    var buttonDisabled = $('#customer').val().trim() === '' || $('#customerCost').val().trim() === '';
    $('#custNameNext').prop('disabled', buttonDisabled);
  }

  $('#customer').on('keyup', validateNextButton);
  $('#customerCost').on('keyup', validateNextButton);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <input id="customer" name="first-input" type="text">
  <input id="customerCost" name="second-input" type="text">
  <input id="custNameNext" type="submit" value="Submit" disabled="disabled">
</form>

我已在您的 sn-p 中插入了您已有的 ID。作为建议，最好省略长行代码并将它们拆分成更连贯的代码。

buttonDisabled 中保存的测试语句可以更改，您是否需要任何其他验证才能启用提交按钮（例如正则表达式）。

Answer 2

您可以将两个输入都添加到事件处理程序中，并且通过使用 input 事件，您还将捕获粘贴和其他一些场景。

然后只过滤值以检查它们是否为空

$(document).ready(function() {
    $('#custNameNext').prop('disabled', true);

    $('#customer, #customerCost').on('input', function() {
          var val = $('#customer, #customerCost').filter(function() {
                return this.value.trim().length !== 0;
        }).length === 0;

        $('#custNameNext').prop('disabled', val);
    });
});

FIDDLE