JQuery UI: Disable accordion tab?

I have a JQuery UI accordion that contains different parts of the user workflow. I would like to disable accordion "tabs" that the user hasn't reached yet. (So 开发者_如何学JAVAif the user hasn't signed in yet, he can't yet publish content, etc.) Then, as the user completes the necessary steps, more tabs will become enabled.

Is there a way to do this? This doesn't work, even as a way to prevent any tabs from changing:

$("#accordion").accordion({
    changestart: function(event, ui) {
        return false;
    }
});

---

You should add/remove the class "ui-state-disabled" to each header element (i.e. "<h3>") you want to disable/enable. Then use:

$( "#accordion" ).on( "accordionbeforeactivate", function (){
  return ! arguments[1].newHeader.hasClass( "ui-state-disabled" );
})

To add/remove a class dyanamically, use:

$( "selector" ).addClass( "ui-state-disabled" );
$( "selector" ).removeClass( "ui-state-disabled" );

You can add a meaningul "id" attribute to each header element to simplify the "selector" part. For example, "step-1", "step-2", "step-n" for each step the user should traverse along the workflow.

You can try the following if you are positive about the position the tab to be disable has:

// Disable the first tab
$( "#accordion > h3:first-child" ).addClass( "ui-state-disabled" );

// Make sure the fourth tab is enabled
$( $( "#accordion > h3" )[3] ).removeClass( "ui-state-disabled" );

Also note that using "ui-state-disabled" is actually meaningful because it will render the header grayed (or whatever your theme makes disabled things look like).

Another note, if the tab you are dynamically disabling is currently active, it won't do anything special (i.e. it won't collapse or activate another tab). You can add extra logic to activate a default tab or do anything else.

---

This seems like it should be easier. But here's a solution:

The first thing we need to keep track of is which panels can be legally opened:

// Keep an array of the indexes that the user can open. 
// [0,1] would allow ONLY the first and second panels
// to be opened
var available_indexes = [0,1];

Then, when you call your accordion, do it like this

$('#accordion').accordion({
    header: 'h3',
    change: function(event, ui) {
        var newIndex = $(ui.newHeader).index('h3');
        if (jQuery.inArray(newIndex, available_indexes) == -1) {
            var oldIndex = $(ui.oldHeader).index('h3');
            $(this).accordion( "activate" , oldIndex );
            alert('That panel is not yet available');
        }
    }
});

So then, if you want to allow the user to access the third panel, you would do:

available_indexes.push(2);

---

    $("#service_options_available h3").click(
        function(e) {
            if($(this).hasClass("empty")) {
                e.stopImmediatePropagation();
                return false;      
            }
        }
    );
    $("#service_options_available").accordion({
        autoHeight: false, 
        collapsible: true, 
        active: false,
        header: 'h3',
        changestart: function(event, ui) {
            if($(ui.newHeader).attr("id") != null) {
                alert($(ui.newHeader).attr("id"));
            }
        }
    });

---

This has worked for me:

$("#accordionTabToDisable").click(function(){
  $("#acordion" ).accordion( "option", "active",0); //maybe this line could be optional
  return false;
});

---

The tab can be easily disable as below:

<p:tab title="First Tab Title" **disabled=”true”**>

To enable it you can use javascript to enable it again.

---

Diego Augusto Molina nailed it. ui-state-disabled class is the way to go: http://api.jqueryui.com/theming/css-framework/

Consider this piece of code that allows user go back, but not go to next accordion tab. We do it only programmatically, after proper validation:

function disableAccordionNextTabs () {
    var $accordion  = $(".accordion");
    var active      = $accordion.accordion('option', 'active');
    var $headers    = $accordion.find($accordion.accordion('option', 'header'));

    $headers.addClass('ui-state-disabled');
    for (var i = active; i >= 0; i--) {
        $headers.eq(i).removeClass('ui-state-disabled');
    }
}

---

None of the workarounds really worked for me. Would've been alot nicer if it was supported out of the box ofcourse, but here's the workaround i used. I bound the event to a custom event and added my own click event which can do whatever logic and trigger the customClick event if the navigation is allowed.

JS:

$('#accordion').accordion({ 
  event: 'customClick'
});

$('#accordion > .ui-accordion-header').click(function() {
  if(confirm ("Is this allowed?")){
    $(this).trigger('customClick');
  }
});

Or check out the working jsfiddle here: http://jsfiddle.net/hWTcw/

---

A pretty easy solution is grabbing the header (<h3>) by content:

$("h3:contains('panel name')").toggleClass('ui-state-disabled');

That way you can enable/disable with the same code or hide the panel all together with:

$("h3:contains('panel name')").toggle();