Question

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

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

替换 $（this）.attr（＆＃39; disabled＆＃39;，true）; 同 $（this）.attr（＆＃39;禁用＆＃39;，＆＃39;禁用＆＃39;）;

我希望它会起作用!!

Answer 2

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

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 3

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

在steps.min.js上搜索Finish和#finish的单词，然后删除该单词。
在wizard_step.js上，只需注释所有onFinished函数

jQuery-steps：单击禁用提交

3 个答案: