在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”。