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

Answer 1

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