We solve this situation by adding a JS function and CSS style. We just add an overlay on disabled input field and Run mouse events on it. See demo below for full code

DEMO

Learn more »

two functionalities og Demo

1) check all check boxes in TD on check of check box in TH of table TR
2) If we check all check box manually then check box in TH also get check.

DEMO

Learn more »

$(document).ready(function() {

lastIndex = 0;
     $(document).keydown(function(e){
        if(e.keyCode==9)
        var thisTab = $(":focus").attr("tabindex");
if(e.keyCode == 9) {
if(e.shiftKey) {
  //Focus previous input
  if(thisTab == startIndex){
$("#"+tabLimitInID).find('[tabindex='+lastIndex+']').focus();
        return false;
        }

}else {
 if(thisTab == lastIndex){
$("#"+tabLimitInID).find('[tabindex='+startIndex+']').focus();
        return false;
        }
}
}

     });      


 var  setTabindexLimit = function(x,fancyID){
console.log(x);
     startIndex = 1;
lastIndex = x;
tabLimitInID = fancyID;
$("#"+tabLimitInID).find('[tabindex='+startIndex+']').focus();
  }

setTabindexLimit(10,"DivWithTabIndex");


});

Learn more »