首页 文章

Jquery:基于下拉值的启用/禁用不适用于动态生成的输入

提问于
浏览
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. 如果选择了类型==借方和帐户中的值,则启用debit_amount输入并禁用credit_amount输入

2. 如果选择了类型==信用卡和帐户中的值,则启用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);
    }
});

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元素的输入元素 . 这很脆弱,如果你过多地改变你的标记就会破坏

    • 从<select> id属性中解析序列号,并使用它来查找要修改的<input>

相关问题