javascript - jQuery-steps:禁用点击提交

Question

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

有几个suggestions关于如何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

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

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 的更新，我不确定这个链接会持续多久:

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