0

我有一个表单，我可以在其中添加新行以使用 jquery 增加表单元素。在那种形式中，我有两个下拉选项(Name:type and accounts)和两个文本输入(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.如果 type selected == Debit 并且选择了账户中的值，则启用 debit_amount 输入并禁用 credit_amount 输入

2.如果 type selected == Credit 并且选择了来自 accounts 的值，则启用 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" />

两种解决方案：

  • 使用 jQuery 遍历 API 查找与触发 onChange 事件的选择元素相关的输入元素。这很脆弱，如果你改变你的标记太多会破坏
  • 从 <select> id 属性中解析出序列号，并使用它来查找要修改的 <input>
于 2012-07-13T12:01:31.190 回答