CODEWITHSUNDEEP
jquery-steps
Josh Sirota
Josh Sirota

Reputation: 71

JQuery Steps: how to disable a step?

I am using JQuery Steps, which has been excellent. But some things are proving tricky.

Suppose I am on step 2. Depending on what is selected in my form, I might want to skip directly to step 4 when "next" is clicked, and further, disable the step 3 anchor altogether. The step 3 anchor should still appear in the steps list, it should just be grayed out and disabled.

I cannot seem to get this to work. Any advice from the JQuery Steps gurus?

I have tried several variants of the following in 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');
                }

And applied what I thought was appropriate CSS:

.wizard>.steps a .disabled,.wizard>.steps a:hover .disabled,.wizard>.steps a:active .disabled,.wizard>.steps a:visited .disabled { color: #777; cursor: default }

But it doesn't seem to do the trick. And it's not just the CSS that doesn't seem to work, the step still seems to be enabled. Everything looks right in the Chrome debugger, but it's not working right. I am obviously confused.

Upvotes: 3

Views: 8230

Answers (1)

JustADork
JustADork

Reputation: 59

I realize this is sort of an old question, but here's what I did to remedy this.

Add the following to 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);
    }
};

...and then call it by using this: 

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

Hope this helps.

Upvotes: 5

Related Questions