CODEWITHSUNDEEP
jquery-uijquery-ui-selectable
user2735223
user2735223

Reputation: 21

Cancel jQuery UI selectable for blocked elements

I'm trying to make an hour selection for a day. In some cases, there are already reservations for this day.

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

I already used a filter for blocked elements but it's still possible to continue selecting after a blocked element. The result would be an invalid reserveration because the reservations are overlapping.

For my example above: The item is already reserved between 1 and 2 PM, But I can still select from 11 AM to 3 PM.

I need something that stops (disables) the selection after passing a blocked element. For my example the result should be 11–12 o'clock.

Upvotes: 2

Views: 2482

Answers (2)

user2735223
user2735223

Reputation: 21

I solved it using the jQuery hover event but I think it's a little dirty:

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

Upvotes: 0

konp
konp

Reputation: 33

You need to set the cancel selector as mentioned in the API:

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

Link to the API Doc: http://api.jqueryui.com/selectable/

See this JSFiddle:

http://jsfiddle.net/Sd8VJ/

Upvotes: 2

Related Questions