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.