How to disable NEXT button on step 1 of FuelUX Wizard

I am creating a wizard control pages using the FuelUX wizard plugin

And I am trying to disable the NEXT button only on the STEP1 of the wizard.

Kindly check this image for better understanding:

I would love to have some help on this. Let me know if need anything from my side.



Ok. After much research I just have this solution for you. You need to modify the plugin fuelux.js. Take unminified version of fuelux.js and find below line of code

var canMovePrev = ( this.currentStep > 1 ); //remember, steps index is 1 based...
var isFirstStep = ( this.currentStep === 1 );
var isLastStep = ( this.currentStep === this.numSteps );

// disable buttons based on current step
if ( !this.options.disablePreviousStep ) {
         this.$prevBtn.attr( 'disabled', ( isFirstStep === true || canMovePrev === false ) );

// change button text of last step, if specified
var last = this.$nextBtn.attr( 'data-last' );
if(isFirstStep) //Add this line
    this.$nextBtn.attr( 'disabled', ( isFirstStep === true || canMoveNext === false ) );

The above line you can find it in setState: function() { which is in Line number 3652

Let me know if you face any issue

EDIT: and to work with you alternate next button you can write it as below

         $nextBtn = $('.wizard').find( 'button.btn-next' );

Add your alternate button wherever you want and just add a class btnext to it.


I really tried all the suggestions given by peoples. I dont know why none seemed to work for me. May be bacause I didn't provide enough information. Out of several methods I tried. I found this one to be the easiest.

protected void NextButton_Click(object sender, WizardNavigationEventArgs e)
       //Suppose You have a control on your webpage. Just check if it has
       //the information you require. In my case lblpasskeytextbox
       //and if the condtion is not fulfilled I am not letting user to move
       //next page
        if (lblPasskeyInformation.Text[0] == 'I')
            e.Cancel = true;

After reading the fuel ux documentation, here seems to be a hack that allows you to disable a specific step without modifying any source fuelux.js code.

    $wizard.on('actionclicked.fu.wizard', function (evt) {

    //Check the current step 
    var currentStep = $wizard.wizard('selectedItem').step;

    //If current step needs to be disabled, disable it and then return.
    if (currentStep === 1)


Please note that $wizard here is just my way of saying $('#myWizard') as described in the fuel ux documentation.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.