0

jqueryを使用してフォーム要素を増やすために新しい行を追加できるフォームがあります。そのフォームには、2 つのドロップダウン オプション(Name:type and accounts)と 2 つのテキスト入力があり(Name:debit_amount and credit_amount)ます。

問題：

ドロップダウン オプションから選択した値に基づいてテキスト入力を有効/無効にする jquery コードを開発しました。ただし、新しい行を追加しない場合にのみ、コードは正常に機能します。新しい行を追加すると、最初の行でのみ機能します。つまり、最初の行の入力のみを無効/有効にします。

明確にするために、新しい行を追加するためのコードを以下に提供していませんが、すべてのコードのライブ画像を取得するには、このリンクjsfiddle.netを確認してください。

選択した値に基づいてすべての入力 (生成された行の入力を含む) を無効/有効にするには、コードにどのような変更を加える必要があるか教えてください。

私のHTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<table class="dynatable">
<thead>
    <tr>
        <th>Type</th>
        <th>Account Name</th>
        <th>Debit</th>
        <th>Credit</th>
    </tr>
</thead>
<tbody id="p_scents">
    <tr>
        <td>
            <select name="type" id="type">
                <option value="Debit">Debit</option>
                <option value="Credit">Credit</option>
            </select>
         </td>

        <td>
            <select name="accounts" id="accounts">
                <option value="">SELECT</option>
                <option value="One">One</option>
                <option value="Two">Two</option>
            </select>
        </td>

        <td>
            <input type="text" name="debit_amount" id="debit_amount" />
        </td>
        <td>
            <input type="text" name="credit_amount" id="credit_amount"/>
        </td>

    </tr>
</tbody>

無効化/有効化の条件

1.タイプ == デビットが選択され、口座からの値が選択されている場合、debit_amount 入力を有効にし、credit_amount 入力を無効にします。

2. type == Credit が選択され、口座からの値が選択されている場合、credit_amount 入力を有効にし、debit_amount 入力を無効にします。

3.タイプとアカウントのいずれかの値が選択されていない場合は、両方を無効にします

ドロップダウン値に基づいて入力を無効/有効にするための私の Jquery コード

//ON the change of accounts(dropdown select)

$("#accounts").change(function() {
    var type = $("select#type").val();
    var accounts = $("select#accounts").val();
    if (type == "Debit") {
        $('#credit_amount').attr("disabled", true);
        $('#debit_amount').removeAttr("disabled", true);
    }
    if (type == "Credit") {
        $('#debit_amount').attr("disabled", true);
        $('#credit_amount').removeAttr("disabled", true);
    }
    if (accounts == "") {
        $('input[name=credit_amount]').val('');
        $('input[name=debit_amount]').val('');
        $('#debit_amount').attr("disabled", true);
        $('#credit_amount').attr("disabled", true);
    }
});


//ON the change of type(dropdown select)

$("#type").change(function() {
    var accounts = $("select#accounts").val();
    var type = $("select#type").val();
    if (type == "Debit" && accounts != '') {
        $('input[name=credit_amount]').val('');
        $('#credit_amount').attr("disabled", true);
        $('#debit_amount').removeAttr("disabled", true);
    }
    if (type == "Credit" && accounts != '') {
        $('input[name=debit_amount]').val('');
        $('#debit_amount').attr("disabled", true);
        $('#credit_amount').removeAttr("disabled", true);
    }
});
4

1 に答える 1

3

問題は、入力要素がすべて同じ id 属性値、つまり「debit_amount」と「credit_amount」を持っているため、jQuery は「#debit_amount」と「#credit_amount」セレクターがどちらを参照しているのかわからないことです。

要素 ID はページ内で一意である必要があるため、それぞれの末尾にシーケンス番号を追加する必要があります。例:

<select name="accounts_1" id="accounts_1">
....
<input type="text" name="debit_amount_1" id="debit_amount_1" />
<input type="text" name="credit_amount_1" id="credit_amount_1" />

2 つのソリューション:

  • jQuery traversal API を使用して、onChange イベントをトリガーした select 要素に関連する入力要素を見つけます。これは脆く、マークアップを変更しすぎると壊れてしまいます
  • <select> id 属性からシーケンス番号を解析し、それを使用して変更する <input> を見つけます
于 2012-07-13T12:01:31.190 に答える