jQuery Forum

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?

1. < tbody id = "selectable" >

   @ for ( int i = 1 ; i <= rowN; i ++ )

   {

   < tr >

   < th > @ i . ToString() </ th >

   @ for ( int k = 1 ; k <= columnN; k ++ )

   {

   if (k % 2 == 0 )

   {

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

   }

   else

   {

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

   }

   index ++ ;

   }

   </ tr >

   }

I am using selectable via JQuery UI. I want everything to be selectable except the row header (please see the red that is highlighted). In other words, is there an easy way to make everything in my table body selectable except the row header?

I tried to give <th> a new id and that didn't work (I didn't think this would work). I also tried to make <td> selectable, but as expected, it failed. Can someone please help?