在使用 jQuery Steps 采取特定操作之前禁用按钮？

Question

我遇到了jQuery Steps 插件的问题。 下一步按钮必须在执行特定操作之前禁用，如果数据得到正确验证，则应该启用它。

所以问题是：如何将 next 按钮设置为默认禁用，是否有可用的方法以编程方式启用或禁用 next 按钮？

这是我当前的代码：

HTML：

<div id="steps">
    <h3>Write question</h3>
    <section>
        <input type="text" id="question" placeholder="Question goes here">
        <button id="save">Save and do something else</button>
    </section>

    <h3>Preview</h3>
    <section>
        <p id="preview"></p>
    </section>

    <h3>Done</h3>
    <section>
        <p>Congratulations text goes here</p>
    </section>
</div>

jQuery：

//start
$(function(){
    $('#steps').steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        stepsOrientation: "vertical"
    });

    $('#save').click(function(){
        $('#preview').html($('#question').val());

        //do something else (ajax wise, etc)
        if(true) {
            //enable NEXT button here...
        }
    });
});

Answer 1

这个问题是很久以前提出的，但我觉得这可以帮助某人。

jQuery Steps插件，可以监听onStepChanging事件： 除非设置了标志，否则返回 false。

$(function() {
    $("#steps").steps({

        //Events
        onStepChanging: function (event, currentIndex, newIndex){
            if(currentIndex==2 && flag==false){
                return false;
            }
            else{
                return true; 
            }     
        },
    });
});

For more information on the jQuery plugin

Answer 2

嗯，这不是很简单，但我想我做到了。

这个想法是在您的输入字段没有内容的情况下不强制任何行为，并自动将disabled 样式添加到按钮。

希望对您有所帮助。它不是很干净，但我相信它可以工作。

在这里查看：JSBin

编辑：请注意，这个插件没有防止已经定义的行为的方法，但将来可能会改变。目前只能这样拦截吧，我想。

EDIT2: 还要注意，因为插件没有重新渲染动作按钮的方法，我们不能调用我的enableButton()函数来re - 启用 内容添加到输入字段后的按钮。

EDIT3： 考虑通过input 的change 事件检查状态以克服最后的困难。像魅力一样工作：FINAL VERSION

Answer 3

禁用它：

.addClass("disabled").attr("aria-disabled", "true"); 

启用它：

 .removeClass("disabled").attr("aria-disabled", "false");

选择按钮，例如。第一个（上一个）：

 $('.actions > ul > li:first-child')

Answer 4

您可以通过在 HTML 中添加属性来禁用按钮，即“禁用”。

<button id="save" disabled>Save and do something else</button>

要在满足所需条件后启用按钮，您可以在 jQuery 中编写：

$("#save").prop("disabled", false);