Question

我一直在敲打我的脑袋试图让它发挥作用。我在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);   
        }
    });
});

这个结果相同。

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

Answer 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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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);   
}
});

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

2 个答案: