2

1日1時間の選択をしようとしています。場合によっては、この日はすでに予約が入っています。

<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 に答える