jquery-ui - 取消 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/