Question

我有一个可拖动元素和一个可放置元素。

通过一组单选按钮，我正在改变droppable的状态＆gt;选项＆gt;禁用为真或假。

检查状态我正在读取禁用选项（droppable）的值并在div中显示＃d1

默认情况下，disabled选项设置为false，因此它正在工作，我可以将该元素放入droppable元素中，如果我选择True，然后再将其更改为False，则它无效。状态显示disabled选项设置为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不同。

此处讨论：How can I convert a string to boolean in JavaScript?

建议更新：

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

工作示例：https://jsfiddle.net/Twisty/dnL8o3wz/

禁用JQuery UI droppable元素选项不更新

1 个答案: