0

I have one draggable element and one droppable element.

Through one set of radio buttons I am changing the status of droppable > option > disabled to True or False.

To check the status I am reading the value of disabled option ( of the droppable ) and displaying inside a div #d1

By default the disabled option is set to false so it is working and I am able to drop the element inside droppable element, if I am making the option True and then changing that to False again then it is not working. The status is showing that the disabled option is set to false but still it is not accepting. 

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

The HTML part is here 

<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>
smo
  • 1

1 Answers1

0

The issue is that the value is a String and not Boolean. This option desires a Boolean, and 'true' is not the same as true.

This is discussed here: How can I convert a string to boolean in JavaScript?

Suggested update:

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

Working Example: https://jsfiddle.net/Twisty/dnL8o3wz/

Community
  • 1
  • 1
Twisty
  • 30,304
  • 2
  • 26
  • 45