如果至少一个输入具有值，则启用按钮（或任何元素）答案

【问题标题】：Enable button (or any element) if at least one input has value如果至少一个输入具有值，则启用按钮（或任何元素）
【发布时间】：2014-10-16 19:26:17
【问题描述】：

如果至少有一个输入元素具有值，我需要启用一个按钮（可能在不久的将来还会启用表单上的其他元素）。我使用 BootstrapValidator 作为主要验证库，因为我使用的是 Twitter Bootstrap，但不知道以简单的方式实现这一点。我所知道的是一一检查每个输入，例如：

if ($('.some_input').length > 0) { // then do actions }

但是如果我有很多领域，这个解决方案似乎很乏味而且不太实用，我还需要触发一些事件，例如：keypress、keyup、keydown、blur也许还有其他人（根本不清楚）。

现在表单非常简单，如下图所示，我的解决方案应该可以工作，但表单会在不久的将来快速增长，所以我将其抛在脑后，我正在寻找另一个解决方案。

只有在表单上的任何输入（Codigo de la Norma， Año de Publicacion, Palabra o Termino que contiene la Norma) 具有值，并且可能在下面的选择上标记的选项具有与默认值不同的值（可以是任何值，例如 --Pick one-- with value=0）简单的话：任何输入至少有 3 个字符，并且 SELECT 中的选择应该与默认的不同，我该怎么做？

【问题讨论】：

使用jQuery的$('.commonclass').on('change', function() { handle here });而不是使用按键事件

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

    $(function() {
            $(':text').on('input', function() {
                if( $(':text').filter(function() { return !!this.value; }).length > 0 ) {
                     $('button').prop('disabled', false);
                } else {
                     $('button').prop('disabled', true);
                }
            });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
    <button disabled="disabled">Submit</button>
</form>

更新

要扩展它以使其与其他表单元素（不包括radios 和checks）一起使用，您可以将:text 更改为:input。并且代码可以缩短为：

$(function() {
    $(':input').on('input', function() {
        var completed = $(':input').filter(function() { return !!this.value; }).length > 0;
        $('button').prop('disabled', !completed);
    });
});

【讨论】：

这几乎可以工作，但缺少 SELECT 行为以检查 SELECT 是否已从默认值更改为任何其他选项，我可以使用上面帖子中提到的相同 change 事件但是如何适应您的解决方案？
只需将:text 更改为:input 即可！
是的，这与我所做的相同，但如果您将 SELECT 元素从默认的 Age range 更改为任何按钮，则该按钮未启用
我们看的是同一个演示吗？您使用的是哪个浏览器和版本？在最新的 Chrome 中为我工作，我不明白为什么它不应该在其他现代的 Chrome 中工作。您是否有无法运行的演示？
嗯，你说得对，它可以在我之前测试过的 Chrome 上工作，但在 Firefox 33 上却不行，你能试试这个吗？我正在使用你在小提琴上留下的演示

【解决方案2】：

每个input 元素都附加了一个名为change 的事件。完成后我会添加一个函数来运行。

如果您真的想要在字段中添加一个字母时运行代码，您可以改用称为 input 的事件（请务必检查任何此类代码的性能不过，因为它会被触发很多！）

尽管浏览器对input 事件的支持比change 事件少得多。

$('input.some_input').on('change', function() {
  if ($(this).val().length > 0) { 
    alert('woot! text!');
  }  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='some_input' value='test' />

【讨论】：