JQuery Selectable not selecting correctly with radio buttons

JQuery Selectable not selecting correctly with radio buttons

EDIT: Working sample code here.

I have two selection modes which I can choose from using radio buttons:

  • One that lets me select <td> elements colored green
  • One that lets me select <td> elements colored blue

Consider the scenario below to describe my problem.

  1. Click Check Out radio button. This means I can only select green colored elements. So far so good.
  2. Now I click Check In. This SHOULD mean I can only select blue colored elements. But I can still select the green colored elements (albeit only one at a time). This should NOT happen with my code. See below for description:


Picture 1: Things are good (I can click the green  grid boxes, but not the blue)

Now things start going wrong


You can find the source code here. I included snippets below on gist. Please check these links out because I couldn't get the code to format on this question nicely

JavaScript

HTML


I think the issue is that my table uses the same element <td> for drawing both the green and blue table data box. That is,

  1. < td class = "book success" data-id = @ index > @ index . ToString() </ td >

  2. < td class = "book info" data-id = @ index > @ index . ToString() </ td >

Where 1 draws the green box and 2 draws the blue box. I tell JQuery Selectable to filter on the class name. That is, either success or info.


Has anyone encountered a problem like this? I tried refreshing selectable, but that didn't fix the issue. As far as I am concerned, setting new filter rules should make things fine, but that's not the case?