Cannot disable the same option already selected

Question

Suppose I have two select . I'm trying to disable the options already selected in one of the select available with the class criterias , for achieve this I wrote the following code, but it didn't work, what I did wrong?

 $('.criterias').on('change', function(event) { var id = $(event.target).val(); $('#container').find('.criterias') .siblings('.criterias') .children('option[value=' + id + ']') .attr('disabled', true) .siblings().removeAttr('disabled'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <table> <tr> <td> <select class="criterias form-control"> <option value="11">test1'</option> <option value="12">test2</option> <option value="13">test3</option> </select> </td> </tr> <tr> <td> <select class="criterias form-control"> <option value="11">test1'</option> <option value="12">test2</option> <option value="13">test3</option> </select> </td> </tr> </table> 

Answer 1

To achieve expected result, remove sibling method

 $('.criterias').on('change', function(event) { var id = $(event.target).val(); $('#container').find('.criterias') .children('option[value=' + id + ']') .attr('disabled', true) .siblings().removeAttr('disabled'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="container"> <table> <tr> <td> <select class="criterias form-control"> <option value="11">test1'</option> <option value="12">test2</option> <option value="13">test3</option> </select> </td> </tr> <tr> <td> <select class="criterias form-control"> <option value="11">test1'</option> <option value="12">test2</option> <option value="13">test3</option> </select> </td> </tr> </table> </div> 

codepen - https://codepen.io/nagasai/pen/daXVLr