通过复选框启用提交的多个表单答案

【问题标题】：Multiple Forms with Submit enabled via Checkbox通过复选框启用提交的多个表单
【发布时间】：2010-12-21 18:59:09
【问题描述】：

首先，内务管理：快速回顾让我认为这不是重复的，但很高兴得到纠正。

我有一个 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");
                }
            });
        });
    });

您可以看到代码在页面准备就绪时运行，选择页面上的所有“表单”，并将点击处理程序附加到每个表单中的每个协议复选框。我一直在努力，并且看起来特别不优雅的是从触发点击事件的复选框对象返回父表单对象，然后到兄弟（复选框）提交按钮以禁用它的方法。如果有人能提出更好的解决方案，那么我已经准备好接受教育了！

【问题讨论】：

我很想知道为什么这被否决了，没有评论的否决确实是糟糕的工作。

标签： jquery asp.net-mvc forms checkbox form-submit

【解决方案1】：

这样的东西可能会更好：

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

您似乎在每个表单中重复使用 id="Agreement" - 您不应该这样做。

如果您将 id 更改为 class，您甚至可以这样做：

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

【讨论】：

【解决方案2】：

我会通过一个函数 disableSubmit(objId, checkState) 来处理它，然后实际上只是在每个复选框上编码一个属性 onclick="disableSubmite('submit1', this.checked);

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

Jquery 很酷，但有时您只需将 JS 直接附加到触发它的对象。

【讨论】：