Question

你好我所有我有以下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>

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

Answer 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");      
    });
});

Answer 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>

Answer 3

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

Jquery函数不适用于两种或多种形式

3 个答案: