JQuery multiple option selection with class disable the selected option and enable it again if not

user_8738288 0
Viewed 21

Hi guys i just wanted to make this thing right, first i have these line of codes in my html file: 

    <select class="form-control select-option></select>

and i got 5 of em like these and then i appended my datas which come out:

    <select class="form-control select-option>
      <option disabled selected>Select an option</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      <option>E</option>
    </select>

All I wanted is that if my first select gets option C in the other selects it will be disabled and if i deselect it and rather choose A then let A be disabled and let C be seen in other selects again. How Am I going to that? Need help. Thank you :)

Note: Continously until all select selected a letter :)

jquery javascript
1 Answers

$(".select-option").on("change",function(){
  $(this).find("option").prop("disabled",false).removeClass("disabled");
 $(this).find("option:selected").prop("disabled",true).addClass("disabled");
});
.disabled{background-color:#eee;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control select-option" >
   <option disabled selected >Select an option</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      <option>E</option>
</select>

user_48261380
Related