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

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" );
    });