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

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

尝试这个...

$(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是，按钮不启用，除非我有两个字段的值，然后返回到第一场与键入和输入其他文本。

无法思考这个问题！

来源

2017-07-01 webguy

这应该为你工作：

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

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

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

来源

2017-07-01 22:31:09 Siavas

感谢您的回答！因为它融合了我所需的按键功能，所以对我很好。让这两个字段使用相同的验证函数是确保两个字段都不是空的绝妙方式，无论哪个字段先填充！我添加了我的正则表达式来validateNextButton并且像魅力一样工作！ – webguy

非常高兴帮助，@webguy。 – Siavas

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

来源

2017-07-01 22:10:09 adeneo

感谢您的回答！我无法轻易弄清楚如何整合我需要的密钥来限制客户提交的内容，但我从您的答案中学到了一些东西，我很感激！ – webguy

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

回答

相关问题