在使用 jQuery 步执行特定操作之前禁用按钮？

Question

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

所以问题是：如何将 next 按钮设置为默认禁用，以及是否有可用的方法来启用或禁用 [=24=]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

您可以通过向 HTML 添加属性来禁用该按钮，即 "disabled"。

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

要在满足您想要的条件后启用按钮，您可以在 jQuery 中写入：

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

Answer 2

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

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

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

在这里查看：JSBin

编辑： 请注意，此插件没有防止已定义行为的方法，但将来可能会更改。这个时候只能这样拦截了，我觉得。

EDIT2: ~~另请注意，因为插件没有 re-render 操作按钮的方法，所以我们无法调用我的enableButton()函数到re-enable内容添加到输入框后的按钮~~

EDIT3: 想到通过 input 的 change 事件检查状态以克服最后的困难。很有魅力：FINAL VERSION

Answer 3

很久以前就有人问过这个问题，但我觉得这对某人有帮助。

jQuery Steps插件，可以监听onStepChanging事件： return 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 4

要禁用它：

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

启用它：

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

到select按钮，例如。第一个（上一个）：

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

在使用 jQuery 步执行特定操作之前禁用按钮？

Disable button until specific action is taken with jQuery Steps?

jquery

jquery-steps