防止在javascript中双击按钮

Question

<script type="text/javascript">
    $(document).ready(function () {
        $("#submit").on("click", function () {
            $(this).attr('disabled', true);
            var taskid = num;
            var loadnew = 1;
            var guessnum = $("input[name=guessnum]:checked").val();
            if (guessnum != 1 && guessnum != 2) {
                alert("You could not submit an empty answer");
                loadnew = 0;
                location.href = "/minions/peerprediction1.php";
            }
            else if (loadnew == 1) {
                finishedTask += 1;
            }
            var starttime = $("#timestart").val();
            var timecost = starttime;
            $.ajax({
                type: "post",
                url: "GameMysql.php",
                data: "taskid=" + taskid + "&guessnum=" + guessnum + "&effort=" + effort + "&finishedTask=" + finishedTask + "&time=" + timecost,
                success: function (data) {
                }
            });
        });
    });

</script>
<form>
    <a class="button" id="submit"><span>&#10003</span>Submit report</a>
</form>

我想确保具有相同答案的表单不会提交两次，并禁用该按钮，但它并没有真正起作用。因为我点击它两次完成的任务数增加了 2 我已经在这里看到了答案Prevent double submission of forms in jQuery 试过了，还是不行

Answer 1

使用按钮元素，它将提供您所追求的功能。它可以设计成看起来像一个锚。尝试使其在所有浏览器中按预期工作的问题更少。

$("#submit").on("click",function(){    
    $(this).attr('disabled', true);
    console.log('disabled');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" id="submit"> <span>&#10003</span> Submit report</button>

Answer 2

你应该使用按钮而不是锚点，锚点不支持 disabled 属性

<button id="submit">Submit Report</button>