3

我正在使用非常棒的 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 调试器中，一切看起来都正常，但运行不正常。我显然很困惑。

4

1 回答 1

5

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

将以下内容添加到 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);

希望这可以帮助。

于 2015-05-05T17:26:50.440 回答