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

score 2 · Answer 1 · answered Aug 03 '17 at 19:21

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

score 2 · Answer 2 · answered May 15 '20 at 14:10

2

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')

answered May 15 '20 at 14:10

Leandro Bardelli

10,561
15
79
116

Joum · Accepted Answer · 2016-01-15T10:51:15.693

1

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

edited Jan 15 '16 at 10:51

answered Jan 14 '16 at 18:38

Joum

3,189
3
33
64

Sorry for the delay. This seems to be working fine. I'm going to adapt it to the script to see how it goes. Thanks for the help! – Andres SK Jan 14 '16 at 19:08
@andufo just updated the link, because for some reason it wasn't the correct final version. Go check it out! ;) – Joum Jan 15 '16 at 10:44
thanks again! that idea works even better in UX terms. – Andres SK Jan 15 '16 at 11:43

score -3 · Answer 4 · answered Jan 14 '16 at 16:59

-3

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

answered Jan 14 '16 at 16:59

Raj Ankur

114
6

Raj, that would be correct on a normal scenario. With this jquery-steps plugin, the next button is rendered upon activation, so I'm looking for a plugin solution. – Andres SK Jan 14 '16 at 17:19

Disable button until specific action is taken with jQuery Steps?

4 Answers4