Select2: Disabled selected option value not working - php

Question

I have module that you will transfer the qty from "warehouse from" to "warehouse to"(Warehouse From & Warehouse To these are my dropdown)
I want put some validation that you cannot longer choose the first selected warehouse coming from "warehouse from"
View
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 input-padding-left">
<div class="form-group">
<label>Document Reference</label>
<input type="text" name="document_reference" class="form-control">
</div>
<div class="form-group">
<label>From:</label>
<select class="form-control warehouse" name="warehouse_from" required="required" id="warehouse_from" style="width: 100%;">
<option></option>
<option value="0">Unassigned Warehouse</option>
#if($warehouses)
#foreach($warehouses as $v => $warehouse)
<option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
#endforeach
#endif
</select>
</div>
</div>
<hr>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 input-padding-right">
<div class="form-group">
<label>Posting Date</label>
<input type="text" name="posting_date" class="form-control dates">
</div>
<div class="form-group">
<label>To:</label>
<select class="form-control warehouse" name="warehouse_to" id="warehouse_to" required="required" style="width: 100%;">
<option></option>
#if($warehouses)
#foreach($warehouses as $v => $warehouse)
<option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
#endforeach
#endif
</select>
</div>
</div>
Jquery
$('.warehouse').select2({
placeholder: "Select a Warehouse",
});
$(document).on('select2:select', '#warehouse_from', function(e){
// $('#warehouse_from ').on('change',function(){
//send ajax request
var id = $(this).val();
var val = $('#warehouse_from option:selected').text();
alert(val);
$(this).find('option').prop('disabled',false);
$(this).find('option[value='+val+']').prop('disabled',true);
getItemsByWarehouse(id);
e.preventDefault();
return false;
});
Question: Why my disabled didnt work?

Answer 1

You getting the text, not the value of the selected option element:
var val = $('#warehouse_from option:selected').text();
// ...
$(this).find('option[value='+val+']').prop('disabled',true);
It should be:
var val = $('#warehouse_from option:selected').val();
// ...
$(this).find('option[value='+val+']').prop('disabled',true);

Answer 2

My mistake is im disabling the value coming from warehouse_from not in the warehouse_to.
**Jquery**
$(document).on('select2:select', '#warehouse_from', function(e){
//send ajax request
var id = $(this).val();
var val = $('#warehouse_from option:selected').text();
alert(id);
$('select#warehouse_to>option[value="'+id+'"]').attr('disabled','disabled');
getItemsByWarehouse(id);
e.preventDefault();
return false;
});