JQuery steps: how to disable a step?
I am using JQuery steps which were excellent. But some things turn out to be tricky.
Suppose I am in step 2. Depending on what is selected in my form, I may need to go directly to step 4 when clicking next, and furthermore, completely disable snapping in step 3. The anchor for step 3 should be all still appear in the step list, it should only be grayed out and disabled.
I can't seem to get this to work. Any advice from the jQuery Steps gurus?
In onStepChanged, I tried several variations of the following:
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 that doesn't sound like a gimmick. And it's not just the CSS that doesn't seem to work, the step still seems to be included. Everything looks correct in the Chrome debugger, but it doesn't work correctly. I am clearly confused.
source to share
I realize this is kind of an old question, but here's what I did to fix it.
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 using the following:
$("#yourWizard").steps('incomplete', stepNumber);
Hope it helps.
source to share