JQuery tab Ui not disabling

I have tried alot but no success. I have 3 tabs. Tab index is 0,1,2

When page is loaded 2rd tab index should be disabled. When click on 1st tab index the 3rd tab index should enable.

Now I am on 3rd tab index and if i go to 0 tab index than 2 tab index should disable.

So

0 index = disbale 2rd index

1 index = enable 2rd index

2 index = enable 0,1 index

Thats what I want. Below code is not working when I am on tabs-1. Not disabling index 2 :(

$('#Paymenttabs').tabs({
    select: function(e, ui) {
        var isValid = true;
        var num = 0;
        if (ui.panel.id == "tabs-1"){
            $('#Paymenttabs').tabs("disable",[2]);
        }else if (ui.panel.id == "tabs-2"){
            $('#Paymenttabs').t开发者_JS百科abs( "enable" , 2 )
        }else if (ui.panel.id == "tabs-3"){
            $('#Paymenttabs').tabs("option","disabled",[]);
        }
    }
});

I think the reason this is occurring is because according to the documentation:

The selected tab cannot be disabled.

So when you go from [tab3] to [tab1], you are attempting to disable [tab3], which you are currently on. You could get around this by setting a timer for a small amount of time and executing the tab switching code after that timer has completed. This will ensure that the active tab is not the one you're trying to disable:

$('#Paymenttabs').tabs({
    select: function(e, ui) {
        setTimeout(function() {
            var isValid = true;
            var num = 0;
            if (ui.panel.id == "tabs-1") {
                $('#Paymenttabs').tabs("disable", 2);
            } else if (ui.panel.id == "tabs-2") {
                $('#Paymenttabs').tabs("enable", 2)
            } else if (ui.panel.id == "tabs-3") {
                $('#Paymenttabs').tabs("option", "disabled", []);
            }
        }, 10);
    }
});

Here's a working example: http://jsfiddle.net/Csq6x/