jquery-steps - JQuery 步骤 : how to disable a step?

Question

我正在使用 JQuery Steps，它非常好。但事实证明有些事情很棘手。

假设我在第 2 步。根据我在表单中选择的内容，我可能想在单击“下一步”时直接跳到第 4 步，并且进一步禁用第 3 步 anchor 。第 3 步 anchor 仍应出现在步骤列表中，只是变灰并禁用。

我似乎无法让它工作。 JQuery Steps 专家有什么建议吗？

我在 onStepChanged 中尝试了以下几种变体:

                if ($('#option').val() == 'foo') {
                     $('#wizard-t-3').attr('disabled', true);
                     $('#wizard-t-3').addClass('disabled');
                } else {
                     $('#wizard-t-3').attr('disabled', false);
                     $('#wizard-t-3').removeClass('disabled');
                }
                if (currentIndex == 2) {
                    $(this).steps('next');
                }

并应用我认为合适的 CSS:

.wizard>.steps a.disabled,.wizard>.steps a:hover .disabled,.wizard>.steps a:active .disabled,.wizard>.steps a:visited .disabled { 颜色:#777； 游标:默认

但它似乎并不能解决问题。不仅 CSS 似乎不起作用，该步骤似乎仍处于启用状态。在 Chrome 调试器中看起来一切正常，但它无法正常工作。我显然很困惑。

Answer 1

我意识到这是一个老问题，但这是我为解决这个问题所做的。

将以下内容添加到 jquery.steps.js:

$.fn.steps.incomplete = function (i) {
    var wizard = this,
    options = getOptions(this),
    state = getState(this);

    if (i < state.stepCount) {
        var stepAnchor = getStepAnchor(wizard, i);
        stepAnchor.parent().addClass("disabled");
        stepAnchor.parent().removeClass("done")._enableAria(false);
        refreshSteps(wizard, options, state, i);
    }
};

...然后用这个调用它:

    $("#yourWizard").steps('incomplete', stepNumber);

希望这对您有所帮助。