Javascript jQuery步骤：禁用单击提交

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

有一些人认为这并没有解决我的问题。我可以看到第一个按钮在运行——按钮的颜色根据代码发生了变化——但这并没有阻止我重复提交表单

下面是我的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}
        });

替换 $（this.attr（'disabled'，true）； 具有 $（this.attr（'disabled'，'disabled'）

---

我希望它能起作用

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

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: {

        }
});

但这是对你的提琴的更新，我不确定这个链接会持续多久：

如果您想隐藏，请完成/span完成。 只需修改文件steps.min.js和向导\u steps.js

在steps.min.js上搜索单词，其中Finish和#Finish并删除该单词

在wizard_step.js上，只需注释所有onFinished函数

---

“完成”按钮是一个按钮还是标签？如果它是一个标记，$（this）.attr（'disabled'，true）将不起作用。如果有错误或表单不完整，它将被禁用，即使在correction@combatc2谢谢你的回答！但这并没有改变表单的行为。如果它对您不起作用，请提供fiddle，以便我可以查看并更正它。我使用jquery步骤，因此我的代码看起来有点不同。这里有一个小问题：你知道我如何用jQuery步骤找到“.yourButton”的替换文本吗？我被卡住了，因为steps正在我的HTML之外生成按钮。如果有帮助的话，我在检查元素时看到的是，我不确定我是否理解您的要求#finish是锚定标记或元素ID，您可以将选择器更改为#finish而不是.yourButton…什么是“替换文本”？谢谢，这回答了我的问题-通过替换文本，我的意思是我知道您打算将“您的按钮”更改为其他内容，但我不确定是什么。我假设submitHandler应该包含在validate中，因为它在validate文档中，这是您想要的吗？如果是这样，我也看到了同样的问题。我把它放在这里：嗯……我看到了您正在谈论的问题，它似乎发生了，因为您试图将禁用属性设置为对象，而不是表单字段。在fiddle中也没有调用Validate（），因此提交处理程序和成功函数不适用。我有一个答案，可以做你想做的事。另一个方法是检查我的更新，它会给你一个做你想做的事的另一个方法。没有禁用Finish按钮，但是现在我们隐藏它，并在单击上一个按钮时重新显示它