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可選擇取消選擇爲被阻止的元素

回答

相關問題