在jQuery中添加新行时，禁用其他选项选择框

Question

我是jQuery的新手，请帮我解决我的问题。

我有动态选择框和动态行，我想编码这些选择框，就像在选择框中选择一个选项时，默认情况下应该在所有其他选择框中禁用，但是我在更改选择框时执行了此操作，但是当我添加新行时，为新创建的选择框启用了相同的选项。

HTML：

 $(document).ready(function() { GetDeonmination('Denomination'); } function GetDeonmination(ddlId) { $.getJSON("@Url.Action(" GetCash ")", function(data) { var $select = $('#' + ddlId); //$('#down'); $.each(data, function(key, value) { $('<option>').val(value.CashID).text(value.Denominatin).appendTo($select); }); }); } $('.addNewCash').on('click', function() { i = rowCounts = $('#tbody tr').length; addRow(i); }); function addRow(i) { var tr = '<tr class="dataCash">' + '<td style="text-align:center">' + '<select name="Denomination" class="Denomination" onchange="Calculate(\\'Count' + (i) + '\\', \\'Denomination' + (i) + '\\', \\'Total' + (i) + '\\');" id="Denomination' + (i) + '">' + '<option>--Select--</option>' + '</select>' + '</td>' + '<td style="text-align:center"><input type="text" name="Count" id="Count' + (i) + '" class="Count" onkeyup="Calculate(\\'Count' + (i) + '\\', \\'Denomination' + (i) + '\\', \\'Total' + (i) + '\\');" /></td>' + '<td style="text-align:center"><input type="text" name="Total" class="Total" id="Total' + i + '" class="Total" /></td>' + '<td style="vertical-align: middle; text-align:center"><a href="#" class="removeCash"><i class="glyphicon glyphicon-remove" style="text-align:center"></i></a></td>' + '</tr>'; $('#tbody').append(tr); GetDeonmination("Denomination" + i); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel='stylesheet' type='text/css' /> <table class="table table-hover table-bordered table-responsive" id="CashTable"> <thead> <tr> <td style="background-color: #6600CC; font-weight:bold; color: #FFFFFF; text-align: center;">Denomination</td> <td style="background-color: #6600CC; font-weight:bold; color: #FFFFFF; text-align: center;">Count</td> <td style="background-color: #6600CC; font-weight: bold; color: white; text-align: center;">Total</td> <td style="background-color: #6600CC; font-weight: bold; color: white; text-align: center;"> <a href="#" class="addNewCash"><i class="glyphicon glyphicon-plus"></i></a> </td> </tr> </thead> <tbody id="tbody" class="tbody"> <tr class="dataCash"> <td style="text-align:center"> <select name="Denomination" class="Denomination" id="Denomination" onchange="Calculate('Count', 'Denomination', 'Total')"> <option>--Select--</option> </select> </td> <td style="text-align:center"> <input type="text" name="Count" onkeyup="Calculate('Count', 'Denomination', 'Total');" class="Count" id="Count" /> </td> <td style="text-align:center"> <input type="text" name="Total" class="Total" id="Total" readonly /> </td> <td style="vertical-align: middle; text-align:center"> </td> </tr> </tbody> </table> 

Answer 1

您可以在调用onchange事件时设置标志，并禁用选择框。 当您追加新行时，您可以为新创建的选择下拉列表设置“disabled = true”。