禁用 jQuery Smart Wizard 4 的完成按钮答案

【问题标题】：Disable Finish button for jQuery Smart Wizard 4禁用 jQuery Smart Wizard 4 的完成按钮
【发布时间】：2018-01-02 13:25:58
【问题描述】：

我在禁用jQuery Smart Wizard 4 上的“完成”按钮时遇到问题。该站点中给出的示例默认启用该按钮。

它应该默认禁用“完成”按钮，并且只有在到达最后一步时才启用。我应该如何禁用和启用按钮？

非常感谢。

【问题讨论】：

您尝试过或搜索过什么吗？
是的。我将此代码 .addClass('disabled') 添加到
我终于自己解决了这个问题。:) 我添加了一个类名 .addClass('finish_button') 和命令 $(".finish_button").prop("disabled", true);在 $(document).ready(function() 中的最后一行。我现在也知道如何按类启用按钮。

标签： jquery smart-wizard

【解决方案1】：

这是一个带有请求按钮的示例模式。

以https://github.com/techlab/SmartWizard/blob/master/examples/smartwizard-modal.html为例
向模态页脚添加三个按钮：

    <div class="modal-footer">
      <button class="btn btn-secondary" id="prev-btn" type="button">Previous</button>
      <button class="btn btn-secondary" id="next-btn" type="button">Next</button>
      <button class="btn btn-primary" id="finish-btn" type="submit">Finish</button>
    </div>

并编辑 js 逻辑以显示/隐藏按钮：

        $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
           if(stepPosition === 'first'){
               $("#prev-btn").addClass('disabled');
               $("#finish-btn").hide();
           }else if(stepPosition === 'final'){
               $("#next-btn").hide();
               $("#finish-btn").show();
           }else{
               $("#finish-btn").hide();
               $("#next-btn").show();
               $("#prev-btn").removeClass('disabled');
           }
        });

【讨论】：

是的，现在很好。最后一个细节；当你链接你自己的网站、工具和类似的东西时，你需要添加它是你的回购的披露。请参阅the help center 了解更多信息

【解决方案2】：

在 smartWizard 中尝试enableFinishButton 选项。

例如：

$('#wizard').smartWizard({
    enableFinishButton: false
});

【讨论】：

你在使用 SmartWizard3 吗？

【解决方案3】：

嘿，

我刚刚找到了这个解决方案，只需在向导的每个步骤中添加这个简单的代码

if($('button.sw-btn-next').hasClass('disabled')){
            $('.sw-btn-group-extra').show(); // show the button extra only in the last page
        }else{
            $('.sw-btn-group-extra').hide();                
        }

这是完整的代码：

$("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection) {
        if($('button.sw-btn-next').hasClass('disabled')){
            $('.sw-btn-group-extra').show(); // show the button extra only in the last page
        }else{
            $('.sw-btn-group-extra').hide();                
        }

      });

解释很简单，showStep 函数处理向导中的每一步（从第 1 步到第 2 步等）然后我们只需要检查类 btn-next(class next button) 的按钮是否禁用了类，因为我们知道在最后一页时下一个按钮被禁用。

希望对您有所帮助。

【讨论】：

【解决方案4】：

您可以像这样隐藏按钮：

$("#smartWizard").smartWizard({
toolbarSettings: {
    showPreviousButton : false // To hide Previous Button
   }

});

【讨论】：