Disable button until specific action is taken with jQuery Steps?

Question

i'm having an issue with the jQuery Steps plugin. The next button has to be disabled until a specific action is taken, and it should be enabled if the data is properly validated.

So the question is: how can I set the next button to be disabled by default, and, are there available methods to enable or disable the next button programmatically?

This is my current code:

HTML:

<div id="steps">
    <h3>Write question</h3>
    <section>
        <input type="text" id="question" placeholder="Question goes here">
        <button id="save">Save and do something else</button>
    </section>

    <h3>Preview</h3>
    <section>
        <p id="preview"></p>
    </section>

    <h3>Done</h3>
    <section>
        <p>Congratulations text goes here</p>
    </section>
</div>

jQuery:

//start
$(function(){
    $('#steps').steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        stepsOrientation: "vertical"
    });

    $('#save').click(function(){
        $('#preview').html($('#question').val());

        //do something else (ajax wise, etc)
        if(true) {
            //enable NEXT button here...
        }
    });
});

Answer 1

This question was asked a long time ago, but I felt this could help someone.

The jQuery Steps plugin, you can listen for the event onStepChanging: and return false unless if a flag is set.

$(function() {
    $("#steps").steps({

        //Events
        onStepChanging: function (event, currentIndex, newIndex){
            if(currentIndex==2 && flag==false){
                return false;
            }
            else{
                return true; 
            }     
        },
    });
});

For more information on the jQuery plugin