Несколько форм с возможностью отправки через флажок

Question

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

У меня есть приложение ASP.NET MVC, в котором есть страница с несколькими формами, каждая форма имеет несколько текстовых полей, флажок соглашения и кнопку отправки. Я хотел бы отключить кнопку отправки, если флажок соглашения не установлен отдельно для каждой формы. У меня все работает, но у меня такое ощущение, что мне не хватает чего-то элегантного, и я знаю, что в JQuery есть люди, которые гораздо лучше, чем я.

Вот код, который у меня работает:

    $(function() {
        $("form").each(function() {
            $("#Agreement", this).click(function() {
                if (this.checked) {
                    $($($(this).parent().get(0)).find("input:submit").get(0)).attr("disabled", "");
                } else {
                    $($($(this).parent().get(0)).find("input:submit").get(0)).attr("disabled", "disabled");
                }
            });
        });
    });

Вы видите, что код запускается при готовности страницы, выбирает все формы на странице и прикрепляет обработчик кликов к каждому из флажков соглашения в каждой форме. То, с чем я боролся, и что выглядит особенно не элегантно, - это метод получения от объекта флажка, который вызвал событие click, к родительскому объекту формы, а затем к кнопке отправки одного из элементов (флажка), чтобы отключить его. Если кто-то может найти лучшее решение, тогда я готов к образованию!

Answer 1

что-то вроде этого может быть лучше:

$(function() {
    $("form").each(function() {
        $("#Agreement", this).click(function() {
            $('input:submit', this.form).attr("disabled", this.checked ? "" : "disabled");
        });
    });
});

Похоже, вы повторно используете id="Agreement" в каждой форме - вы не должны этого делать.

Вы даже можете сделать это, если смените id на класс:

$(function() {
    $("form .Agreement").click(function() {
        $('input:submit', this.form).attr("disabled", this.checked ? "" : "disabled");
    });
});

Answer 2

Я бы подошел к этому, имея функцию disableSubmit (objId, checkState), а затем просто кодируя каждый флажок атрибутом onclick = "disableSubmite ('submit1', this.checked);

disableSubmit(objId, checkState)
{
   $(#objId).attr("disabled", checkState ? "" : "disabled");
}

Jquery - это круто, но иногда вам просто нужно прикрепить JS непосредственно к объекту, который его запускает.