防止双击 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

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

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

防止双击 javascript 中的按钮

prevent double click on button in javascript

javascript

button