jquery - 禁用 jQuery Smart Wizard 4 的完成按钮

Question

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

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

非常感谢。

Answer 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');
           }
        });

Answer 2

尝试enableFinishButtonsmartWizard 中的选项。

例如。：

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

Answer 3

您可以像这样隐藏按钮：

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

});

Answer 4

嘿，

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

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) 类的按钮是否禁用了类，因为我们知道下一个按钮最后一页时禁用。

希望这有帮助。