Question

var input = document.getElementById('thumbimg');
            input.addEventListener('change', function() {  $("input.imgcheck").attr("disabled", ""); }, false);

当用户选择要上传的文件时，我使用此代码启用提交按钮。但是，如果我想添加多个上传字段呢？我需要知道如果只填写所有上传字段，如何启用提交按钮。任何想法？

Answer 1

一方面，您可以使用更通用的选择器。例如：

$(".mytest").change(function() { $(this).attr("disabled", ""); } ;

会将事件应用于包含类mytest的每个元素。

另一方面，您可以使用delegate function。例如：

$("#myContainer").delegate(".mytest", "change", function(){ $(this).attr("disabled", ""); });

会将事件应用于包含类mytest但属于id为myContainer的主容器的每个元素。

[编辑]（更改上面的代码）要检查您的输入是否已填写，您可以使用此代码（即使未在此处进行测试也应该使用）name selector：

if ($('input[disabled!=""]').length !== 0) {
   // submit
}

此致

最高

Answer 2

您可以使用

$('input').change(function() {

});

将函数绑定到所有<input>元素的change()事件。然后将任何检查添加到函数体，并在验证通过时启用<input type="submit"/>。

您可以使用一些jQuery插件 - jQueryFormValidtor（例如）和jQuery Form Validation Plugins看起来像是一个好的起点。

Answer 3

<强>更新

@Simeon发表了重要评论，他是对的。要解决此问题，您可以检查每个字段的值并查看它是否为空：

var $fields = $('.thumbimg'),
    $submit = $("input.imgcheck"),
     numRequiredFields = $fields.length; // or 3 as per your comment (somewhere)

function runOnChange() {
    var $filledFields = $fields.filter(function(){
        return $(this).val() !== "";
    });
    if($filledFields.length >= numRequiredFields)
        // all fields changed
        // run logic here
        $submit.attr("disabled", "");
    }
    else {
        $submit.attr("disabled", "disabled");
    }
}

$fields.change(runOnChange);

我希望避免检查每个变化的每一个领域，但这似乎是不可避免的。

原始回答：

您必须跟踪哪些字段已更改。如果您有多个文件上载字段，则必须使用类，而不是ID：

var numFields = $('.thumbimg').length,
    changedFields = 0;

function runOnChange() {
    changedFields++;
    if(changedFields >= numFields) {
        // all fields changed
        // run logic here
        $("input.imgcheck").attr("disabled", "");
    }
}

$('.thumbimg').change(runOnChange);

此外，如果您仍然使用jQuery，那么请保持一致并在整个脚本中使用它。特别是不要使用addEventListener，这在IE8及以下版本中无效。 jQuery是从这个浏览器差异中抽象出来的。

Answer 4

接受的答案确实无效。如果用户多次更改第一个文件字段中的文件/图像，则会启用提交按钮。

查看this demo，它会检查每个输入是否有值。代码：

var fileInputs = $('input[type=file]');
var submitBtn = $('input[type=submit]');
fileInputs.change(function() {
    if(fileInputs.filter('[value=""]').length == 0)
        submitBtn.removeAttr('disabled');
    else
        submitBtn.attr('disabled', 'disabled');
});

如何为许多项添加事件监听器？

4 个答案: