如果任何文本字段（同一类）有文本，启用提交按钮答案

【问题标题】：If ANY text field (of the same class) has text, enable submit button如果任何文本字段（同一类）有文本，启用提交按钮
【发布时间】：2014-09-18 17:09:48
【问题描述】：

我一遍又一遍地敲着脑袋试图让它发挥作用。我对 Javascript 还是比较陌生。

我在一个表单中有多个文本字段，它们共享同一个类“.donation”。我有一个默认禁用的提交按钮：

<button type="submit" value="submit" id="continue" class="btn btn-primary" disabled>Continue »</button>

我需要它，以便如果任何“.donation”文本字段中有文本，提交按钮就会启用。文本字段只接受数字。

我尝试了几种不同的脚本都无济于事。我主要看到检查整个表单是否已填写，或者是否已填写单个文本字段的脚本。但同样，我需要的只是要填写的“.donation”字段中的一个 - 任何 -为了启用提交按钮。

我最近的几次尝试包括以下内容：

$(':text').keyup(function() {
if($('.donation').val() != "") {
   $('#continue').removeAttr('disabled');
} else {
   $('#continue').attr('disabled', true);   
}
});

仅在第一个“.donation”字段已填充并忽略所有后续字段时才检测到。

然后我尝试添加一个 .each 值：

$(':text').keyup(function() {
    $('.donation').each(function() {
        if($('.donation').val() != "") {
           $('#continue').removeAttr('disabled');
        } else {
           $('#continue').attr('disabled', true);   
        }
    });
});

这个结果是一样的。

任何帮助都会很棒！提前致谢！

【问题讨论】：

标签： javascript jquery forms

【解决方案1】：

根据值过滤输入以查看其中是否有任何值，然后根据该值设置disabled 属性。

var inputs = $('.donation');

inputs.on('keyup', function() {
    var hasInput = inputs.filter(function() {
                       return $.trim(this.value).length > 0;
                   }).length;

    $('#continue').prop('disabled', !hasInput);
});

var inputs = $('input[type="text"]');

inputs.on('keyup', function() {
    var hasInput = inputs.filter(function() {
                       return $.trim(this.value).length > 0;
                   }).length;

    $('#continue').prop('disabled', !hasInput);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p>A value in any input will enable the button</p>
<br />
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<br/><br/>
<button type="submit" value="submit" id="continue" class="btn btn-primary" disabled>Continue »</button>

【讨论】：

可能是一个微优化，但您可以通过首先检查触发事件的字段来稍微提高效率。如果它不为空，您可以避免检查任何其他字段。当然，如果是空白的，你还需要检查其他的。
是的！只要我输入= $（'.donation'），这个就可以工作。我在页面上也有一个搜索字段，所以如果我执行 'input[type-"text"]' 它不会忽略搜索。谢谢！
@MattBurland - 优化后的版本应该是这样的 -> jsfiddle.net/bagzd1p7

【解决方案2】：

您需要参考each中的当前项目：

$('.donation').each(function() {
if($(this).val() != "") {  // $(this) will get current element object on which iterating
   $('#continue').removeAttr('disabled');
   return false; // break the loop of found element that has value in it
} else {
   $('#continue').attr('disabled', true);   
}
});

【讨论】：

返回？你的意思是返回false，对吧？你也需要一个活动