0

大家好，我有以下 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>

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

4

3 回答 3

2

因为您只能在同一页面上添加一个 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");      
    });
});
于 2013-02-26T18:43:16.863 回答
1

只需使用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>
于 2013-02-26T18:44:53.543 回答
0

首先，您在ID's更多内容div中使用相同的内容html，这并不好。ID 是唯一的。改用 a class。否则classes两者都不起作用，您应该尝试使用 3 个不同的 div 或$.each()函数或识别keyup()

于 2013-02-26T18:46:00.980 回答