启用按钮（或任何元素），如果至少有一个输入有价值 [英] Enable button (or any element) if at least one input has value

问题描述

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

  if（$（'。some_input'）。length> ; 0）{//然后执行操作} 
  

但是，如果我有很多字段，单调乏味而且不太实际，我也需要触发一些很多事件，例如： keypress ， keyup ， keydown ， blur 以及其他人也可能（根本不清楚）。

现在这个表单非常简单，下面的图片显示出来了，我的解决方案应该可以工作，但是表单会很快成长，并且在不久的将来，所以我将它留下，我正在寻找另一种解决方案。

此处按钮Buscar（它在img上启用，但不会运行）只有当表格上的任何输入（Codigo de la Norma，Añode Publicacion，Palabra o Termino que contiene la Norma）都有价值并且可能是一种选择时，才应该启用这个功能在下面的选择标记有一个不同于默认值的值（可以是任何例如--Pick one-- value = 0）用一个简单的话来说：任何输入至少有3个字符最小值，SELECT中的选择应该是不同于默认的，我该怎么做？

=snippet-code> $（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>名字：< input type =textname =firstname>< br> Last name：< input type =textname =lastname> <峰; br> < button disabled =disabled>提交< / button>< / form>  

更新

为了扩展它，它可以与其他表单元素（不包括 / code>和检查），您可以将：text 更改为：input 。代码可以缩写为以下内容：

$ $ $（'：$'$'$'$'$'$' ）.on（'input'，function（）{
var completed = $（'：input'）。filter（function（）{return !! this.value;}）。length> 0;
$（'button'）。prop（'disabled'，！completed）;
}）;
}）;


I'm need to enable a button (and perhaps other elements on the form in the near future) if at least one of the input element has values. I'm using BootstrapValidator as a main validation library since I'm using Twitter Bootstrap but have not idea, in the easy way, to achieve this. What I know is check each input one by one as for example:

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

But if I have many fields this solutions seems to be tedious and not very practical, also I'll need to trigger in some many events as for example: keypress, keyup, keydown, blur and maybe others too (not clear at all).

Right now the form is pretty simple as image shows below and the my solution should works but the form will grow up fast and in the near future so I leave it behind and I'm looking for another solution.

Here the button "Buscar" (it's enabled on the img but doesn't care about this I miss to disabled when I took the screenshoot) should be enabled only if any of the input on the form (Codigo de la Norma, Año de Publicacion, Palabra o Termino que contiene la Norma) has values and possibly a choice marked on the select below has a value different from the default (can be any as for example --Pick one-- with value=0) in a simple words: any input has at least 3 characters minimmum and choice in the SELECT should be different from the default one, how can I do that?

解决方案

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

Update

To expand this so it works with other form elements (excluding radios and checks) you can change :text to :input. And the code can be shortened to the following:

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

这篇关于启用按钮（或任何元素），如果至少有一个输入有价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！