Question

我遇到了jQuery Steps插件的问题。必须先禁用下一个按钮，直到执行特定操作，并且如果数据已正确验证，则应启用该按钮。

所以问题是：如何设置默认情况下禁用下一步按钮，是否有可用的方法以编程方式启用或禁用下一步按钮？

这是我目前的代码：

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()在将内容添加到输入字段后，重新启用按钮的功能。~~

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

禁用按钮，直到使用jQuery步骤执行特定操作？

4 个答案: