多くのアイテムにイベントリスナーを追加するには？

Question

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

このコードを使用して、ユーザーがアップロードするファイルを選択したときに送信ボタンを有効にします。 アップロードフィールド以上を追加したいのですが？すべてのアップロードフィールドが満たされている場合にのみ送信ボタンを有効にする方法を知る必要があります。何か案は？

Answer 1

更新：

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

が、私は、各変化にすべてのフィールドを検査避けることを望んだが、これは避けられないようです。

---

オリジナルの答え：

あなたはフィールドが変更されているのを追跡する必要があります。とにかくjQueryのを使用している場合

また

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

、その後、一貫して、スクリプト全体でそれを使用する：あなたは複数のファイルアップロードフィールドを持っている場合は、クラスではなく、IDを使用する必要があります。特にIE8以下では動作しないaddEventListenerは使用しないでください。 jQueryは、このブラウザの違いから抽象的なものです。

Answer 2

一方では、より一般的なセレクタを使用することができます。例えば：

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

は、クラスmytestが含まれているすべての要素にイベントを適用します。

一方、delegate functionを使用できます。例えば：

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

クラスmytestを含むが、そのID myContainer主容器に属するすべての要素にイベントを適用します。

[EDIT]あなたの入力が満たされているかどうかを確認するには （上記のコードを変更し）、あなたはこのコードを使用することができます（右ここではテストしていない場合でも動作するはずです）name selectorを使用して：

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

よろしく、

マックス

Answer 3

あなたは使用することができ

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

}); 

すべての <input>要素に対して change()イベントに関数をバインドするには、

を使用します。次に、チェックを関数本体に追加し、検証が成功する場合は<input type="submit"/>を有効にします。

利用できる可能性のあるjQueryプラグインがいくつかあります（たとえば、jQueryFormValidtorなど）。jQuery Form Validation Pluginsは、開始するのに適しています。

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