Как добавить прослушиватель событий ко многим элементам?

Question

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

Я использую этот код для включения кнопки отправки, когда пользователь выбирает файл для загрузки. Но что, если я хочу добавить больше, чем поле для загрузки? Мне нужно знать, как включить кнопку отправки, только если заполнены все поля загрузки. Есть идеи?

Answer 1

С одной стороны, вы можете использовать более общий селектор.Например:

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

будет применять событие к каждому элементу, который содержит класс mytest.

С другой стороны, вы можете использовать функцию делегата ,Например:

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

будет применять событие к каждому элементу, который содержит класс mytest, но принадлежит к основному контейнеру с идентификатором myContainer.

[EDIT] (измененоприведенный выше код) Чтобы проверить, заполнены ли ваши входные данные, вы можете использовать этот код (должен работать, даже если он здесь не тестировался), используя селектор имен :

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

С уважением,

Макс

Answer 2

Обновление:

@ Симеон сделал важный комментарий, и он прав.Чтобы решить эту проблему, вы можете проверить значение каждого поля и посмотреть, является ли оно пустым или нет:

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 предназначен для абстрагирования от этого браузера различий.

Answer 3

Вы можете использовать

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

});

для привязки функции к событию change() для всех элементов <input>. Затем добавьте любые проверки в тело функции и включите <input type="submit"/>, если проверка прошла успешно.

Существует несколько доступных плагинов jQuery, которые вы можете использовать - jQueryFormValidtor (например) и Плагины проверки формы jQuery выглядят как хорошее место для начала.

Answer 4

Принятый ответ не работает действительно не работает правильно.Кнопка отправки будет активирована, если пользователь несколько раз изменит файл / изображение в первом поле файла.

Посмотрите на это демо , которое проверяет, что каждый вход имеет значение,Код:

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