如何將事件偵聽器添加到多個項目？

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

我使用此代碼在用戶選擇要上載的文件時啓用提交按鈕。但是如果我想添加更多的上傳字段？我只需要知道如何啓用提交按鈕只有當所有的上傳字段填充。有任何想法嗎？如何將事件偵聽器添加到多個項目？

來源

2011-06-27 Mohamed Said

更新：

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

我希望避免檢查每個變化各個領域，但似乎這是不可避免的。

原來的答覆：

你將不得不跟蹤哪些領域發生了變化。如果你有一個以上的文件上傳領域，你必須使用類，而不是標識：

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有從這個瀏覽器中抽象出來的差異。

來源

2011-06-27 10:02:04

它的作用就像一個魅力，謝謝:) –

如果用戶改變多次選擇文件會產生不正確的結果，因爲每次文件改變時都會運行「change」事件 – Simeon

@Simeon：真的，好點，更新了我的答案。 –

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

$(".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 
}

的問候，

最大

來源

2011-06-27 09:34:52 JMax

您好，感謝您的回覆。但是，如果任何字段發生更改，此代碼可以使函數運行，但是隻有在所有字段發生更改時纔想啓用它。 –

只需檢查每個更改事件上所有文件輸入的值。如果它們中沒有一個是空的，則啓用提交按鈕。 –

@穆罕默德賽義德：我編輯了我的答案，以更好地解決您的問題 – JMax

你可以使用

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

});

將函數綁定到所有<input>元素的change()事件。然後將任何檢查添加到函數體中，並在驗證通過時啓用<input type="submit"/>。

有一些jQuery插件可用，您可以使用 - 例如jQueryFormValidtor和jQuery Form Validation Plugins看起來是一個很好的開始。

來源

2011-06-27 09:35:30 andyb

我已經在使用jquery驗證器，但是我試圖強制用戶在能夠提交表單之前上傳三張圖片，這就是爲什麼我是禁用提交按鈕。 jQuery中是否存在AND條件？如$（'input and input2'）。change（function（...（）這樣該函數不會運行，除非三個輸入被改變了嗎？ –

接受的答案確實沒有無法正常工作。如果用戶多次更改第一個文件字段中的文件/圖像，則將啓用提交按鈕。

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

來源

2011-06-27 11:30:34 Simeon

如何將事件偵聽器添加到多個項目？

回答

相關問題