JQuery UI Tabs: how to change selected tab from callback, supplied to 'select' event?

Question

I use JQuery UI tabs, and I've attached a callback function to the select event, and I want to change selected tab from within this function:

$('#tabs').tabs({
  select: funciton () {
    // here I have to change the tab, that have been just selected, to another one
  }
});

For example, I have three forms, one under each tab. User have to fill in them in correct order, first, then second, and then the last one. If user fills in the first form, and then clicks on the third tab, I have to redirect him to the second tab programmatically. I've achieved this goal by visually simulating the selection of the second tab, but I think this is not the best solution:

$('#tabs').tabs({
  select: funciton (event, ui) {
    if (ui.index > 2 && !$('#form2').valid()) {
      // here I have to change the tab, that have been just selected, to another one
      $('#tabs ul.ui-tabs-nav li').removeClass('ui-state-focus ui-tabs-selected ui-state-active');
      $('#tabs ul.ui-tabs-nav a[href="#tab2"]').parent('li').addClass('ui-state-focus ui-tabs-selected ui-state-active');
      $('#tabs div.ui-tabs-panel').addClass('ui-tabs-hide');
      $('#tabs div#tab2').removeClass('ui-tabs-hide');
    }
  }
});

Answer 1

I agree with PetersenDidIt, but I guess it is easier to demonstrate it with some code:

var $tabs = $('#tabs').tabs({ disabled: [1, 2] });

$('#buttonToEnableTab2').click(function() {
    $tabs.tabs({disabled: [2]});
});

$('#buttonToEnableAllTabs').click(function() {
    $tabs.tabs({disabled: false});
});

Example: http://jsfiddle.net/william/ysjVU/2/

You can also have some event to trigger the tab to be disabled again.