0

こんにちは、入力に1つ以上の値がある場合にのみ送信を有効にするjquery関数の下にありますが、私のページには同じ数の入力ボタンと送信ボタンがあります.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>

最初のテキストボックスに何かを入力すると、送信ボタンがアクティブになり、正常に機能しますが、2番目または3番目のテキストボックスに値を追加すると、送信ボタンがアクティブになりません。

4

3 に答える 3

2

同じページに id="textbox" を持つ要素を 1 つしか追加できないためです。

入力に何らかのクラス名を追加し (例: "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、代わりに使用してください。idid

$(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 は一意です。class代わりにaを使用してください。そうしないと、classesどちらでも機能しません。3 つの異なる$.each()div または関数を使用するか、認識してみてください。keyup()

于 2013-02-26T18:46:00.980 に答える