java下拉框禁止输入_Jquery：基于下拉值的启用/禁用不适用于动态生成的输入

我有一个表单，我可以添加新行来使用jquery增加表单元素 . 在那个表单中，我有两个下拉选项 (Name:type and accounts) 和两个文本输入 (Name:debit_amount and credit_amount) .

问题：

我开发了一个jquery代码，用于根据下拉选项中的选定值启用/禁用文本输入 . 但是，只有在我不添加新行时，代码才能正常工作 . 如果我添加一个新行，它只适用于第一行，我的意思是它只禁用/启用第一行的输入 .

为了清楚起见，我没有提供下面添加新行的代码，但要获得我所有代码的实时图片，请查看此链接，jsfiddle.net

您能否告诉我，我应该对代码进行哪些更改，以便能够根据所选值进行所有输入(包括生成行的输入)禁用/启用？

我的HTML

Add Another Input Box

TypeAccount NameDebitCredit

Debit

Credit

SELECT

One

Two

禁用/启用条件

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);

}

});