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我在一个键盘中，除非我在两个字段中都有值，否则按钮不会启用，然后返回到带有键盘的第一个字段并输入其他文本。

无法通过思考这一点！

Answer 1

您可以将两个输入添加到事件处理程序，并使用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

Answer 2

这应该适合你：

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

我已经在您的代码段中插入了您已经拥有的ID。作为一个建议，最好省略长行代码并将它们分成更连贯的代码。

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

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

2 个答案: