How to Enable And Disable jQuery Tab in RunTime In ASP.NET

I want disable and enable jQueryUI tabs based on the AJAX content.

<script>
        $(function () {
            $("#tabs").tabs({
                disabled: [1, 2,3],
                collapsible: true,
                fx: [{
                    opacity: 'toggle',
                    duration: 'slow',
                    height: 'toggle'
                }, 
                     {
                         opacity: 'toggle',
                         duration: 'slow',
                         height: 'toggle'
                     }],
                beforeLoad: function (event, ui) {
                    ui.jqXHR.error(function () {
                        ui.panel.html(
                            "Couldn't load this tab. We'll try to fix this as soon as possible. ";
                    });
                }
            });
        });


    </script>

And HTML Code:

<div id="tabs">
            <ul>
                <li class="context-tab"><a id="recent-tab" href="#iframe1">Recent</a></li>
                <li class="context-tab"><a id="popular-tab" href="#iframe2">Popular</a></li>
                <li class="context-tab"><a id="random-tab" href="#iframe3">Random</a></li>
                <li class="context-tab"><a id="question-tab" href="#iframe4">By Question</a></li>

            </ul>
            <iframe id="iframe1" src="Default2.aspx" style="width: 100%;" height="900"></iframe>

            <iframe id="iframe2" src="Default3.aspx" style="width: 100%;"></iframe>

            <iframe id="iframe3" src="Default2.aspx" style="width: 100%;"></iframe>

            <iframe id="iframe4" src="Default3.aspx" style="width: 100%;"></iframe>
        </div>

For example when the user selects popular-tab it loads Default3.aspx page. In every page I have Next Button. I want when the user clicks the Next button this and the next tab are available to the user, but not the previous tabs. For example when a user in recent-tab and clicks the Next button recent-tab is enabled but popular-tab is disabled.

Edit 01:
i have 4 pages and example page1.aspx,page2.aspx,page3.aspx,page4.aspx, in default i have tab and when user select tabe recent-tab load page1.aspx for user and page2.aspx and page3.aspx and page4.aspx is unactive, in page1 i have button when user click in this button i want go to popular-tab and load page3.aspx and unactive recent-tab and active popular-tab. and etc, when write this code for button next in page2 not work. thanks for help me

Thanks.

Solution

On the click event of the 'Next' button you can have an onclick function that disables the previous tabs.

For example if you click on the next button in 'recent-tab' the next button would look something like this:

<button onclick="$('.next-button').tabs({ disabled: [ 1, 2, 3 ] })">Next</button>

Below is the official documentation on tab disabling.

http://api.jqueryui.com/tabs/#option-disabled