JQuery 步骤：如何禁用步骤？

Question

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

假设我在第 2 步。根据我在表单中选择的内容，我可能希望在单击“下一步”时直接跳到第 4 步，并且进一步完全禁用第 3 步锚点。步骤 3 锚点仍应出现在步骤列表中，它应该只是灰显并禁用。

我似乎无法让它发挥作用。来自 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 { color: #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);

希望这可以帮助。