jquery ui可选择取消选择为被阻止的元素

我试图做一个小时的选择一天。在某些情况下，这一天已经有所保留。

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

我希望有人有一个想法，因为我不是很习惯Javascript，但我真的很喜欢它。

来源

2013-08-31 user2735223

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

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

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

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

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

看到这个的jsfiddle：

http://jsfiddle.net/Sd8VJ/

来源

2013-08-31 09:43:50 konp

谢谢，但“取消”只允许在thi元素上启动ah选择 - 如果您尝试选择阻止的元素，则需要停止（禁用）该选择的内容。 – user2735223

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

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

来源

2013-09-03 07:30:51 user2735223

jquery ui可选择取消选择为被阻止的元素

回答

相关问题