Set JQuery selectable Tbody pointer events to none

Set JQuery selectable Tbody pointer events to none

Hi THere,

I have a jquery selectable which is a table with many tbodys. Each tbody has TR and TD tags. I want to disable the pointerevents, it should not be selectable, clickable, or drag selectable for certain tbody's based on a conditional statement. I set the pointerevents: none, it works only for the <a> tag, but not on the jquery selectable tbody etc. Can you please advise?
 if (Online == false)
  { 
                                        @:<tbody id="tbody_@(tbodyIDNum)" disabled="disabled" class="inactive" style="pointer-events: none; border-top: 2px solid black; border-right: 2px solid black; border-left: 2px solid black;">    
                                    }
                                    else
                                    { 
                                         @:<tbody id="tbody_@(tbodyIDNum)" style="pointer-events: none; border-top: 2px solid black; border-right: 2px solid black; border-left: 2px solid black;">    
                                    }

Style:
 .inactive {
        pointer-events: none;
        cursor: default;
    }