Question

我正在尝试一天选择一小时。在某些情况下，这一天已经有了保留。

<ol id="selectable">
    <li id="1" class="ui-widget-content">7:00</li>
    <li id="1" class="ui-widget-content">8:00</li>
    <li id="1" class="ui-widget-content">9:00</li>
    <li id="1" class="ui-widget-content">10:00</li>
    <li id="1" class="ui-widget-content">11:00</li>
    <li id="1" class="ui-widget-content">12:00</li>
    <li id="1" class="blocked">reserved</li>
    <li id="1" class="blocked">reserved</li>
    <li id="1" class="ui-widget-content">3:00</li>
</ol>

我已经使用过滤器来阻止元素，但仍然可以在被阻止的元素之后继续选择。结果将是无效的保留，因为保留是重叠的。

对于我上面的示例：该项目已在1点到2点之间保留，但我仍然可以选择从上午11点到下午3点。

我需要在传递一个被阻止的元素后停止（禁用）选择的东西。对于我的例子，结果应该是11-12点。

Answer 1

您需要设置API中提到的取消选择器：

$("#selectable").selectable({
   cancel: ".blocked"
});

链接到API文档：http://api.jqueryui.com/selectable/

请参阅此JSFiddle：

http://jsfiddle.net/Sd8VJ/

Answer 2

我使用jQuery悬停事件解决了它，但我觉得它有点脏：

   $("#selectable .blocked").hover(function() {
      $( "#selectable" ).selectable( "disable" );
    });

取消jQuery UI可选择被阻止的元素

2 个答案: