jquery ui 手风琴禁用点击

Question

我有一个像这样的手风琴集

$(".accordion-form").accordion({
    collapsible:false,
    autoHeight: false,
    changestart: checkChanged,
    change: function(e, ui) {active = $( ".accordion-form" ).accordion( "option", "active");},
    active: 0
});

active 是一个静态变量，它始终具有活动内容。

我想做的是在活动标题之前启用标题以供单击，并在活动标题之后禁用标题以供单击。

这样我就可以让手风琴表现得像一种形式，“你可以后退，但在完成这部分之前不能前进”。

任何帮助将不胜感激

Answer 1

虽然我同意 Frédéric 的观点，即手风琴对于这种行为来说并不是一个很好的小部件，但您应该能够使用一些简单的 JS 来做到这一点。将另一个“onclick”处理程序附加到手风琴标头，并在标头距离太远时终止该事件：

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

这需要您有一个 current_section 变量来保存最后一个已完成的部分（我假设您已经有类似的东西），并确保该处理程序在 JqueryUI 手风琴设置之后（或之前）附加，以便您的处理程序首先被调用。

希望这有帮助！

Answer 2

我在其他地方找到了这个问题的解决方案：

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

现在实现禁用功能的技巧：

// 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);

每当您想重新激活选项卡时，请执行以下操作：

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

来源：https://forum.jquery.com/topic/disable-enable-sections-of-accordion