jQuery 步：禁用点击提交

Question

我想在单击 jQuery 步表单后禁用“完成”按钮。目前，用户可以通过多次单击“完成”按钮来重复提交表单。

有几个 suggestions on how to approach this 没有解决我的问题。我可以看到第一个在运行——按钮的颜色根据代码改变了——但这并没有阻止我重复提交我的表单。

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

替换 $(this).attr('disabled', 真); 和 $(this).attr('disabled', 'disabled');

希望有用！！

Answer 2

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

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

更新

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

在您提供的 fiddle 中，将您的 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: {

        }
});

但这是对您的 fiddle 的更新，不过我不确定这个 link 会持续多久：

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

Answer 3

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

在 steps.min.js 上搜索单词，其中完成并 #finish 并删除该单词。
on wizard_step.js 只需注释所有 onFinished 函数

jQuery 步：禁用点击提交

jQuery-steps: disable submit on click

javascript

jquery

jquery-steps