Question

I have disabled the tabs for jquery tabs. I am using jquery-ui-1.10.3.custom.min.js and jquery-1.9.1.js. I want to traverse back and forth for the visible tabs. But it is pointing to the disabled tabs. I have two button next and previous and which performs call there functios as below on onclick. I use the below code as per this

 function OnNextButtonClick()
             {
              var index= $('#ui-tabs').tabs("option", "active");
              var size=$('#ui-tabs >ul >li').size();
                for(var i=index+1;i<size;i++){

                   if(isDisabled(i))
                   {
                      continue;
                   }else{
                    $('#ui-tabs').tabs('option', 'active',i);
                    break;
                   }
                   }                 
             }
function OnPrevButtonClick()
             {
              var index=$('#ui-tabs').tabs("option", "active");

                for(var i=index-1;i>=0;i--){

                   if(isDisabled(i))
                   {
                  continue;
                   }else{
                    $('#ui-tabs').tabs('option', 'active',i);
                    break;
                   }
                }      
             }

 function isDisabled(index) {
            return $.inArray(index, $("#tabs").tabs("option", "disabled")) >-1;
        }

But it is not working for me, function isDisabled gives me wrong result. How do I get the list/array of disable tab index. Please assist.

Was it helpful?

Solution

You have used a wrong tab element id(tabs instead of ui-tabs) in the method isDisabled

function isDisabled(index) {
     return $.inArray(index, $("#ui-tabs").tabs("option", "disabled")) > -1;
}

Demo: Fiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top