CODEWITHSUNDEEP
jqueryjquery-steps
Andres SK
Andres SK

Reputation: 10974

Disable button until specific action is taken with jQuery Steps?

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

Upvotes: 3

Views: 10319

Answers (4)

Leandro Bardelli
Leandro Bardelli

Reputation: 11578

To disable it:

.addClass("disabled").attr("aria-disabled", "true");

To enable it:

 .removeClass("disabled").attr("aria-disabled", "false");

To select the button, for eg. the first one (previous):

 $('.actions > ul > li:first-child')

Upvotes: 2

Tyler N
Tyler N

Reputation: 44

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

Upvotes: 2

Joum
Joum

Reputation: 3245

Well, it wasn't very straightforward, but I think I made it.

The idea is to force no behavior in case your input field doesn't have content, and automatically add the disabled style to the button.

Hope it helps. It's not very clean, but I believe it works.

Check it out here: JSBin

EDIT: Please note that this plugin doesn't have methods for preventing the behavior already defined, but that might change in the future. At this moment you can only intercept it this way, I think.

EDIT2: Also note that because the plugin doesn't have a method to re-render the action buttons, we can't call my enableButton() function to re-enable the button after content is added to the input field.

EDIT3: Thought of checking the state via input's change event to overcome last difficulties. Works like a charm: FINAL VERSION

Upvotes: 1

Raj Ankur
Raj Ankur

Reputation: 114

You can disable the button by adding an attribute to your HTML i.e. "disabled".

<button id="save" disabled>Save and do something else</button>

To enable the button after your desired condition is met, you can write in your jQuery:

$("#save").prop("disabled", false);

Upvotes: -3

Related Questions