Jquery 函数不适用于两个或多个表单答案

【问题标题】：Jquery function not working for two or more formsJquery 函数不适用于两个或多个表单
【发布时间】：2013-02-26 18:40:24
【问题描述】：

您好，我有以下 jquery 函数，仅当输入有 1 个或多个值时才启用提交，但我的页面上有相同的多个输入和提交按钮 jquery 函数对于第一种形式很好，但它不适用于其他形式表格。

脚本：

$(function () 
{
    $("#textbox").bind("change keyup", function () 
    {      
        if ($("#textbox").val() != "")
            $(this).closest("form").find(":submit").removeAttr("disabled");
        else
            $(this).closest("form").find(":submit").attr("disabled", "disabled");      
    });
});

HTML：

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" id="textbox" name="textbox" />
    <input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" id="textbox" name="textbox" />
    <input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" id="textbox" name="textbox" />
    <input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>

当我在第一个文本框中输入任何内容时，提交按钮会被激活并且工作正常，但是如果我在第二个或第三个文本框中添加任何值，则提交按钮不会被激活。

【问题讨论】：

计算中的ID通常用于唯一标识某物。您多次使用同一个 ID，会出现错误。
您是否尝试过使用类而不是 id 作为选择器？您应该知道，您不能将相同的 id 分配给同一页面中的多个元素。编辑：@lee：该死的，你打败了我 ;-)
非常感谢。这个对我有用。你们是石头。再次感谢你。

标签： javascript jquery html

【解决方案1】：

因为您只能在同一页面上添加一个 id="textbox" 的元素。

在输入中添加一些类名（例如“textbox”），并在事件绑定时将选择器“#textbox”更改为“.textbox”：

$(function () 
{
    $(".textbox").bind("change keyup", function () 
    {      
        if ($(this).val() != "")
            $(this).closest("form").find(":submit").removeAttr("disabled");
        else
            $(this).closest("form").find(":submit").attr("disabled", "disabled");      
    });
});

【讨论】：

【解决方案2】：

只需使用class 而不是id，因为您不能拥有多个具有相同id 的元素。

另外，您需要在事件处理程序中使用$(this) 来访问更改的元素。

试试这个：

<script type="text/javascript">
    $(function () {
        $(".textbox").bind("change keyup", function () {      
                if ($(this).val() != "")
                    $(this).closest("form").find(":submit").removeAttr("disabled");
                else
                    $(this).closest("form").find(":submit").attr("disabled", "disabled");      
            });
        });
</script>

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" class="textbox" name="textbox" />
    <input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" class="textbox" name="textbox" />
    <input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" class="textbox" name="textbox" />
    <input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>

【讨论】：

【解决方案3】：

首先，您在html 中使用相同的ID's 以获得更多div，这并不好。 ID 是唯一的。请改用class。否则它不会与 classes 一起工作，你应该尝试使用 3 个不同的 div 或 $.each() 函数或识别 keyup()

【讨论】：