在jQuery的选择元素中禁用一个选项

Question

我只想在已经使用jQuery选择了select元素的情况下禁用它的特定选项。

如果已经在某行中选择了一个国家，则无法在不同的行中再次选择它，反之亦然。 添加行时也应应用此功能。

我的问题是，即使我on触发change选择时添加了验证，也无法正常工作，我仍然可以选择同一国家/地区。

请在下面查看我的代码。

 $(document).ready(function() { $('.btn-add').on('click', function() { var lastRow = $('table tr.content:last').html(); $('table').append('<tr class="content">' + lastRow + '</tr>'); deleteRow(); $('tr.content:last select.country').val(""); $('select').each(function() { if ($(this).val() == $('select:selected').val()) { $(this).attr('disable'); alert("Sorry, you cannot select the same country."); return false; } }); }); $('select.country').on('change', function() { $('select').each(function() { if ($(this).val() == $('select:selected').val()) { $(this).attr('disable'); alert("Sorry, you cannot select the same country."); return false; } }); }); deleteRow(); function deleteRow() { $('.btn-delete').on('click', function() { $(this).closest('tr').remove(); }); } }); 

 .btn-add, .btn-delete { padding: 2px; cursor: pointer; } 

 <table class="table"> <thead> <tr> <th>Gender</th> <th>Country</th> <th>Actions</th> </tr> </thead> <tbody> <tr class="content"> <td> <select> <option class="Male">Male</option> <option class="Female">Female</option> </select> </td> <td> <select class="country"> <option class="UK">UK</option> <option class="US">US</option> <option class="JP">JP</option> </select> </td> <td> <span class="btn-delete">Delete</span> </td> </tr> </tbody> </table> <br><br> <span class="btn-add">Add</span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

没有使用option元素中使用的属性类 。 将其更改为值 。 您不需要使用each()来禁用特定选项。 取所选的上一个选项的值，以便您可以使用该值来标识设置disabled属性的正确选项。

您可以尝试以下方法：

 $(document).ready(function() { $('.btn-add').on('click', function(e) { var prevVal = $('select.country').last().val(); var lastRow = $('table tr.content:last').html(); if(!prevVal){ alert('Country not selected'); return false; } $('select.country').trigger('change'); $('table').append('<tr class="content">' + lastRow + '</tr>'); $('tr.content:last select.country').val(''); $('tr.content:last').find('option[value='+prevVal+']').attr('disabled', 'disabled'); }); $('select.country').on('change', function() { $('select').each(function() { if ($(this).val() == $('select:selected').val()) { $(this).attr('disable'); alert("Sorry, you cannot select the same country."); return false; } }); }); $('body').on('click','.btn-delete', function() { if($('tbody>tr').length == 1) alert('Single row can not be deleted'); else if($(this).closest('tr').is(":last-child")) $(this).closest('tr').remove(); else alert('You are allowed to delete only the last row'); }); }); 

 .btn-add, .btn-delete { padding: 2px; cursor: pointer; } 

 <table class="table"> <thead> <tr> <th>Gender</th> <th>Country</th> <th>Actions</th> </tr> </thead> <tbody> <tr class="content"> <td> <select> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> <td> <select class="country"> <option value="UK">UK</option> <option value="US">US</option> <option value="JP">JP</option> </select> </td> <td> <span class="btn-delete">Delete</span> </td> </tr> </tbody> </table> <br><br> <span class="btn-add">Add</span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>