CODEWITHSUNDEEP
javascriptjquery
sfarzoso
sfarzoso

Reputation: 1600

Cannot disable the same option already selected

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>

Upvotes: 0

Views: 35

Answers (1)

Naga Sai A
Naga Sai A

Reputation: 10975

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

Upvotes: 1

Related Questions