Deaktivieren <select><option>

Question

Ich habe zwei <select> Elemente auf meiner Webseite. Schauen Sie sich this fiddle an.

Wie Sie sehen, können wir nicht die selbe Option sowohl am Ursprung als auch am Ziel auswählen. Aber immer wenn eine Option deaktiviert ist, wird sie nicht wieder aktiviert, selbst nachdem ein anderes Element ausgewählt wurde.

Wie kann ich wieder eine disabled Option enabled machen?

Answer 1

$(document).ready(function(){ 
 

 
    $('#origin').change(function(){ 
 
     var airportOrigin=($(this).val()); 
 
     var airportDestination=$('#destination').val(); 
 
     $("#destination option").removeAttr("disabled"); 
 
     $("#destination option:contains('"+ airportOrigin + "')").attr("disabled",true); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
<label for="origin">Origin:<p> </p></label> 
 
     
 
<select id= "origin" data-live-search="true" class="selectpicker form-control" data-size="5" title="Select Destination"> 
 
<option data-subtext="DEL" data-tokens="DEL New Delhi">New Delhi</option> 
 
<option data-subtext="BOM" data-tokens="BOM Mumbai">Mumbai</option> 
 
<option value="Kolkata" data-subtext="CCU" data-tokens="CCU Kolkata">Kolkata</option> 
 
<option data-subtext="BLR" data-tokens="BLR Bangalore">Bangalore</option> 
 
<option data-subtext="MAA" data-tokens="MAA Chennai">Chennai</option> 
 
<option data-subtext="PNQ" data-tokens="PNQ Pune">Pune</option> 
 
<option data-subtext="GOI" data-tokens="GOI Goa">Goa</option> 
 
<option data-subtext="GAU" data-tokens="GAU Guwahati">Guwahati</option> 
 
<option data-subtext="ISK" data-tokens="ISK Gandhinagar">Gandhinagar</option> 
 
<option data-subtext="IXJ" data-tokens="IXJ Jammu">Jammu</option> 
 
<option data-subtext="BHO" data-tokens="BHI Bhopal">Bhopal</option> 
 
<option data-subtext="IXA" data-tokens="IXA Agartala">Agartala</option> 
 
</select> 
 
</div> 
 
       
 
<div class="form-group"> 
 
<label for="destination">Destination:<p> </p></label> 
 
<select id= "destination" data-live-search="true" class="selectpicker form-control" data-size="5" title="Select Destination"> 
 
<option data-subtext="DEL" data-tokens="DEL New Delhi">New Delhi</option> 
 
<option data-subtext="BOM" data-tokens="BOM Mumbai">Mumbai</option> 
 
<option value="Kolkata" data-subtext="CCU" data-tokens="CCU Kolkata">Kolkata</option> 
 
<option data-subtext="BLR" data-tokens="BLR Bangalore">Bangalore</option> 
 
<option data-subtext="MAA" data-tokens="MAA Chennai">Chennai</option> 
 
<option data-subtext="PNQ" data-tokens="PNQ Pune">Pune</option> 
 
<option data-subtext="GOI" data-tokens="GOI Goa">Goa</option> 
 
<option data-subtext="GAU" data-tokens="GAU Guwahati">Guwahati</option> 
 
<option data-subtext="ISK" data-tokens="ISK Gandhinagar">Gandhinagar</option> 
 
<option data-subtext="IXJ" data-tokens="IXJ Jammu">Jammu</option> 
 
<option data-subtext="BHO" data-tokens="BHI Bhopal">Bhopal</option> 
 
<option data-subtext="IXA" data-tokens="IXA Agartala">Agartala</option> 
 
</select> 
 
</div>

Answer 2

bereits.

$(document).ready(function(){ 

    $('#origin').change(function(){ 

     var airportOrigin=($(this).val()); 
     var airportDestination=$('#destination').val(); 

     $("#destination option").attr("disabled", false); 

     $("#destination option:contains('"+ airportOrigin + "')").attr("disabled",true); 

    }); 

});