Question

我在禁用＆＃34;完成＆＃34;时遇到问题jQuery Smart Wizard 4上的按钮。站点中给出的示例默认情况下启用了按钮。

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

非常感谢你。

Answer 1

Here's an example modal with the buttons as requested.
https://github.com/amard33p/jq-smartwizard-modal

Taking https://github.com/techlab/SmartWizard/blob/master/examples/smartwizard-modal.html as an example.
Add three buttons to the modal footer:

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

and edit the js logic to show/hide the buttons:

        $("#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

平，

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

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（类下一个按钮）已禁用类，因为我们知道当页面最后一个时禁用下一个按钮。

希望得到这个帮助。

Answer 3

您可以隐藏这样的按钮：

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

});

禁用jQuery Smart Wizard 4的完成按钮

3 个答案: