jquery ui accordion disabling clicking

I have an accordion set like this

$(".accordion-form").accordion({
    collapsible:false,
    autoHeight: false,
 开发者_运维技巧   changestart: checkChanged,
    change: function(e, ui) {active = $( ".accordion-form" ).accordion( "option", "active");},
    active: 0
});

active is a static variable which always have the active content.

What I would like to do is enable headers before the one actived for clicking, and the headers after the active one been disabled for clicking.

This way I can make the accordion act like a form in the way of "you can go back but no forward til your finish this part".

Any help would be appreciated

---

While I agree with Frédéric that an accordion isn't a great widget for this sort of behaviour, you should be able to do it with some simple JS. Attach another 'onclick' handler to the accordion headers, and have it kill the event if the header was too far along:

$('.accordion-form .ui-accordion-header').click(function(e) {
    if($(this).index() > current_section.index())
    {
        e.stopImmediatePropagation();
    }
});

That'll need you to have a current_section variable that holds the last section completed (I assume you already have something like this), and make sure this handler gets attached after (or before) the JqueryUI accordion setup, so your handler gets called first.

Hope this helps!

---

I found the solution to this problem elsewhere:

// Add the class ui-state-disabled to the headers that you want disabled
$( ".whatyouwantdisabled" ).addClass("ui-state-disabled");

Now the hack to implement the disabling functionality:

// replace the old eventhandler
var accordion = $( "#accordion" ).data("accordion");
accordion._std_clickHandler = accordion._clickHandler;
accordion._clickHandler = function( event, target ) {
 var clicked = $( event.currentTarget || target );
 if (! clicked.hasClass("ui-state-disabled")) this._std_clickHandler(event, target);

Whenever you want to re-activate a tab, do:

// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwantenabled" ).removeClass("ui-state-disabled");

Source: https://forum.jquery.com/topic/disable-enable-sections-of-accordion