CODEWITHSUNDEEP
javascriptjqueryhtml
sequel
sequel

Reputation: 196

Disable <select> <option>

I have two <select> elements on my web page. Check out this fiddle.

As you can see, we cannot select the same option in both origin and destination. But whenever an option is disabled it doesn't get enabled again, even after any other element is selected.

How can I make a disabled option enabled again?

Upvotes: 1

Views: 79

Answers (2)

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$(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>

Upvotes: 1

adamyi
adamyi

Reputation: 547

Try this.

$(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);

    });

});

Upvotes: 1

Related Questions