jQuery-steps：禁用点击提交

Question

一旦单击完成，我想禁用 jQuery-steps 表单中的“完成”按钮。 目前，用户可以通过多次单击“完成”按钮来重复提交表单。

有几个建议，就如何解决这个没有解决不了这个问题对我来说。 我可以看到第一个在起作用——按钮的颜色根据代码改变了——但这并没有阻止我重复提交我的表单。

我的 JavaScript 在下面（我不确定 HTML 是否会在这里提供信息，但也可以包含它）； 有没有人有关于如何解决这个问题的建议？ onFinishing 不是禁用按钮的合适位置吗？

  $("#form").steps({
            stepsOrientation: "vertical",
            bodyTag: "fieldset",
            onStepChanging: function (event, currentIndex, newIndex) {
               omitted for brevity
            },
            onStepChanged: function (event, currentIndex, priorIndex) {
                omitted for brevity}
            },
            onFinishing: function (event, currentIndex) {
                var form = $(this);

                //Applying colour for finish button
                var result = $('ul[aria-label=Pagination]').children().find('a');
                $(result).each(function () {
                    if ($(this).text() == 'Finish') {
                        $(this).attr('disabled', true);
                        $(this).css('background', 'green');
                    }
                });

                form.validate().settings.ignore = ":disabled, :hidden";

                // Start validation; Prevent form submission if false
                return form.valid();
            },
            onFinished: function (event, currentIndex) {
                var form = $(this);
                event.preventDefault();
                getResult();
                enableFinishButton: false;
                // Submit form input
                //form.submit();
            }
        }).validate({
            errorPlacement: function (error, element) {
                $('#step1Errors').append(error);
            },
            rules: {omitted for brevity},
            messages: {omitted for brevity}
        });

Answer 1

您始终可以使用提交处理程序禁用按钮单击，然后使用成功函数在表单提交/通过验证后再次启用它。

submitHandler: function() { 
    $(".yourButton").prop('disabled', true);
},
success: function(response){
        //success process here
       $(".yourButton").prop('disabled', false); 
}

更新

根据您的小提琴，您可以在用户到达最后一个按钮并单击它时交替隐藏按钮，然后当当前索引不是 7 时，只需再次显示所有内容。

在您提供的小提琴中，将您的 JS 代码更改为此，您将看到我在说什么。

$("#example-vertical").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanged: function (event, currentIndex, priorIndex) {
        if(currentIndex != 7){
            var result = $('ul[aria-label=Pagination]').children().find('a');
            $(result).each(function () {
                $(this).css('display', 'block');        //turn everything visible again
            });
        }
        if (currentIndex === 1 && priorIndex === 0) {

        }
        },
        onFinishing: function (event, currentIndex) {
            var form = $(this);
            var result = $('ul[aria-label=Pagination]').children().find('a');
            $(result).each(function () {
                if ($(this).text() == 'Finish') {
                    //$(this).attr('disabled', 'disabled');
                    //$(this).css('background', 'green');
                    $(this).css('display', 'none');
                    alert("Now you cannot click the #finish button twice,"+ 
                        "press Previous and it will reappear");
                }
            });

        form.validate().settings.ignore = ":disabled, :hidden";

        return form.valid();
        },
        onFinished: function (event, currentIndex) {
            alert(event+":"+currentIndex);
            var form = $(this);
            event.preventDefault();
            getResult();
            // enableFinishButton: false;
            // Submit form input
            //form.submit();
        },
    stepsOrientation: "vertical", 
    }).validate({
        /* 
        submitHandler: function() { 
            alert("submit handler function not being called, validate not working");
            $("#finish").prop('disabled', true);
        },
        success: function(response){
            alert("success function not being called, validate not working");
            $("#finish").prop('disabled', false); 
        },
        */

        errorPlacement: function (error, element) {
            $('#step1Errors').append(error);
        },
        rules: {
        },
        messages: {

        }
});

但这是对您的小提琴的更新，我不确定此链接将持续多长时间：

https://jsfiddle.net/n1a0zLpk/1/

Answer 2

替换 $(this).attr('disabled', true); 与 $(this).attr('disabled', 'disabled');

我希望它会起作用！！

Answer 3

如果你想隐藏#finish/span Finish。 只需修改文件steps.min.js和wizard_steps.js

1. 在steps.min.js 上搜索单词，其中Finish 和#finish 并删除该单词。
2. 在wizard_step.js 上只注释所有onFinished 函数