jquery - 在 onfinish 事件 jquery.steps 后禁用完成按钮

Question

我使用 jquery.steps 但在按下完成按钮后我无法禁用它。

这是我对组件的初始化：

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

因此，当我按下完成时，它会进入该功能，但我还需要它来禁用完成按钮，这样用户就不会多次单击它。

任何帮助表示赞赏

Answer 1

这就是我所做的，它似乎完成了所有按钮的工作：

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

它将 href 值更改为 [buttonname]-disabled，有效地使其对 jQuery Steps 不可见。该代码还将父列表元素的样式更改为“禁用”类，使其显示为禁用（即灰显）。

Answer 2

您可以在函数中添加它。

enableFinishButton: false;

请参阅文档。

Answer 3

您可以在函数中添加它。

showFinishButtonAlways = true

请参阅下面的代码块

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