disable finish button after onfinish event jquery.steps

Question

I use jquery.steps but I fail to disable the finish button after it has been pressed.

This is my initialze of the component:

    $("#wizard").steps({
    onFinished: function (event, currentIndex) {
       //Do Function
    },
    labels: {
        finish: "Attack the planet",
        next: "Next",
        previous: "Previous",
    }
});

So when I press finish it goes to the function but I also need it to disable the finish button so users dont multiple click on it.

Any help is appreciated

score 7 · Answer 1 · answered Dec 16 '14 at 19:21

This is what I did and it seems to get the job done for all the buttons:

function togglePrevious(enable) { toggleButton("previous", enable); }
function toggleNext    (enable) { toggleButton("next",     enable); }
function toggleFinish  (enable) { toggleButton("finish",   enable); }
function toggleButton(buttonId, enable)
{
    if (enable)
    {
        // Enable disabled button
        var button = $("#wizard").find('a[href="#' + buttonId + '-disabled"]');
            button.attr("href", '#' + buttonId);
            button.parent().removeClass();
    }
    else
    {
        // Disable enabled button
        var button = $("#wizard").find('a[href="#' + buttonId + '"]');
            button.attr("href", '#' + buttonId + '-disabled');
            button.parent().addClass("disabled");
    }
}

It changes the href value to [buttonname]-disabled, effectively making it it invisible to jQuery Steps. The code also changes the style of the parent list element to the "disabled" class to make it appear disabled (i.e grayed out).

score 1 · Answer 2 · edited Jul 08 '14 at 11:38

1

You can add this inside the function.

enableFinishButton: false;

See the docs.

edited Jul 08 '14 at 11:38

Hans Keﬆing

38,117
9
79
111

answered Jul 08 '14 at 11:01

Conquest

285
1
4
15

I only wnat to disable it when I clicked the finish button. Not at start – Kaizer Jul 08 '14 at 13:00
Yeah so put it inside the function that gets called when you click the button. – Conquest Jul 08 '14 at 13:02
@Conquest Maybe you should post the code because that makes no sense. I've tried all the standard "JQueryUI" ways to set the option, they do not work, period. – KyleM Mar 26 '15 at 23:19
You can not do it like this – pabloRN Nov 05 '19 at 04:01

César Augusto · Answer 3 · 2022-01-10T20:42:08.403

-3

You can add this inside the function.

showFinishButtonAlways = true

See the code block below

 $(function (){
      $("#wizard").steps({    
        showFinishButtonAlways = true,
        onFinished: function (event, currentIndex) {
         //Do Function
        },
        labels: {
            finish: "Finish",
            next: "Next",
            previous: "Previous",
         }
      });
    });

edited Jan 10 '22 at 20:42

answered Dec 19 '16 at 16:17

César Augusto

593
1
7
7

Doesn't answer the question at all – pabloRN Nov 05 '19 at 04:00

disable finish button after onfinish event jquery.steps

3 Answers3