Disabled selected option for others select box when new row added in jQuery

Question

I am new in jQuery, please help me regarding my problem bellow.

I have dynamic select boxes with dynamic rows, and I want to code these select box like when one option is selected in a select box this should be disabled in all other select boxes by default, however I did this on change of select box, but when I am adding a new row the same option in enabled for new created select box.

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

You can set a flag when onchange event is called and you are disabling the select box. And when you append a new row, then you can set "disabled=true" for the newly created select dropdown.