Jquery函数不适用于两个或多个窗体

Jquery function not working for two or more forms

本文关键字：两个 窗体 函数 不适用 适用于 Jquery      更新时间：2023-09-26

大家好，我有下面的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="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");      
    });
});

只需使用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>

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

相关文章：