2

我正在尝试为一天选择一个小时。在某些情况下，这一天已经有预订。

<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 点。

4

2 回答 2

2

您需要按照 API 中的说明设置取消选择器：

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

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

看到这个 JSFiddle：

http://jsfiddle.net/Sd8VJ/

于 2013-08-31T09:43:50.540 回答
0

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

   $("#selectable .blocked").hover(function() {
      $( "#selectable" ).selectable( "disable" );
    });
于 2013-09-03T07:30:51.137 回答