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

Posted 2023-05-07

【中文标题】取消 jQuery UI 可选择被阻止的元素

【英文标题】：Cancel jQuery UI selectable for blocked elements

【发布时间】：2013-09-03 23:51:53

【问题描述】：

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

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

【问题讨论】：

目前我正在做同样的事情。我使用日期时间选择器插件trentrichardson.com/examples/timepicker。有很多选项，在我的场景中，我验证了 javascript 函数中的预订按钮。希望对你有帮助

Hy Christian - 我需要使用某种表格，因为我需要显示保留时间。

【参考方案1】：

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

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

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

查看这个 JSFiddle：

http://jsfiddle.net/Sd8VJ/

【讨论】：

谢谢，但“取消”仅不允许在 thi 元素上开始选择 - 如果您尝试选择被阻止的元素，我需要停止（禁用）选择。

【参考方案2】：

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

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