How to disable the NEXT button in step 1 of the FuelUX wizard

Question

I create master control pages using the MagicUX wizard plugin http://getfuelux.com/javascript.html#wizard

And I try to disable the NEXT button only in step 1 of the wizard.

Please check this image for a better understanding: http://i.imgur.com/xlhwu2j.png

I would like a little help with this. Let me know if anything is needed on my part.

Answer 1

Ok. . fuelux.js. fuelux.js

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 ) );
}

setState: function() {, 3652

, -

:, ,

$(document).ready(function(){
   $('.btnext').on('click',function(){
         $('.wizard').wizard('next');
         $nextBtn = $('.wizard').find( 'button.btn-next' );
         $nextBtn.removeAttr('disabled');
    });
});

, , btnext.

Answer 2

, . , . , . . .

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;
            return;
        }
}

Answer 3

ux , , , - .

    $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)
    {
        evt.preventDefault();
        return; 
    }



});

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