文章/答案/技术大牛

发布

社区首页 >问答首页 >禁用jQuery智能向导的完成按钮4

问禁用jQuery智能向导的完成按钮4
EN

Stack Overflow用户

提问于 2018-01-02 21:25:58

回答 4查看 7.8K关注 0票数 3

我在禁用jQuery Smart Wizard 4上的"Finish“按钮时遇到了问题。站点中给出的示例默认情况下启用了该按钮。

默认情况下，它应该禁用Finish按钮，并且应该只在到达最后一步时启用。如何禁用和启用该按钮？

非常感谢。

jquery

smart-wizard

回答 4

Stack Overflow用户

发布于 2019-01-19 02:40:58

这是一个示例模式，其中包含所需的按钮。

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

票数 1

Stack Overflow用户

发布于 2018-05-24 02:45:15

在smartWizard中尝试选项enableFinishButton。

例如：

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

票数 0

Stack Overflow用户

发布于 2018-06-13 16:35:24

嗨，

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

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

希望这能有所帮助。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48061870

复制

相似问题

问禁用jQuery智能向导的完成按钮4
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用jQuery智能向导的完成按钮4EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用jQuery智能向导的完成按钮4
EN