Параметр отключенного элемента интерфейса пользователя JQuery не обновляется

Question

У меня есть один перетаскиваемый элемент и один сбрасываемый элемент.

С помощью одного набора переключателей я изменяю статус droppable > option > disabled на True или False.

Чтобы проверить состояние, я читаю значение параметра disabled ( of the droppable) и отображаю внутри div #d1

По умолчанию для параметра disabled установлено значение false, поэтому он работает, и я могу добавить элемент внутрь элемента droppable, если я выбрал параметр True, а затем снова изменил его на False, тогда он не работает. Статус показывает, что для деактивированной опции задано значение false, но он по-прежнему не принимает.

$(document).ready(function() {
///////////
$( function() {
$( "#draggable" ).draggable({
});
});
///////////
$( "#droppable" ).droppable({
drop: function( event, ui ) {
    $( this )
    .find( "p" )
    .html( "Welcome Dropped!" );
}
});
///////////////
var status_used = $( "#droppable" ).droppable( "option", "disabled" );
$('#d1').html( " <b>Status of option : disabled </b> " + status_used );
////////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$( "#droppable" ).droppable( "option", "disabled", sel );
var status_used = $( "#droppable" ).droppable( "option", "disabled" );
$('#d1').html( " <b>Status of option   : disabled </b>: " + "("+ sel + ")" + 
status_used );
})
///////////////////////
})

HTML часть здесь

<div class='row'> <div class='col-md-6'> 
  <div id="draggable" class="ui-widget-content">
    <p>Drag me to my distination</p>
  </div>
</div><div class='col-md-2'>  
   <div id="droppable" class="ui-widget-header" >
     <p>Dropp here</p>
   </div>
 </div></div>


<div id=d1></div>
<br>
<div class='radio-inline'>
    <label><input type='radio' name='r1' id='r1' value='true' > True</label>
 </div>

 <div class='radio-inline'>
     <label><input type='radio' name='r1' id='r2' value='false'      checked>False</label>
</div>

Answer 1

Проблема в том, что value является строкой, а не логическим. Эта опция желает логического, и 'true' это не то же самое, что true,

Это обсуждается здесь: Как я могу преобразовать строку в логическое значение в JavaScript?

Предлагаемое обновление:

var sel = ($(this).val() == 'true');

Рабочий пример: https://jsfiddle.net/Twisty/dnL8o3wz/