C# ASP.NET MVC5中限制按钮重复点击次数（JavaScript实现）

嘿，这个重复提交的问题我在项目里碰到过好多次，确实挺闹心的！给你几个适配Ajax场景的解决方案，你可以根据自己的需求选：

方法1：点击后立即禁用按钮（最直观） #

用户一点击就把按钮锁住，同时修改按钮文本提示正在处理，从视觉上阻止重复点击。你可以把这段逻辑放到Ajax请求的前后：

$(function () {
    // 替换成你实际的创建按钮选择器
    $('#createIncomeTypeBtn').on('click', function(e) {
        e.preventDefault(); // 如果是submit类型按钮，先阻止默认提交行为
        const $btn = $(this);
        
        // 禁用按钮+修改文本
        $btn.prop('disabled', true).text('创建中...');
        
        // 你的Ajax提交逻辑
        $.ajax({
            url: '/IncomeTypes/Create', // 替换成你的实际接口地址
            type: 'POST',
            data: $('form').serialize(), // 序列化表单数据
            success: function(response) {
                // 提交成功后的处理：比如刷新收入类型列表、提示成功
                alert('收入类型创建成功！');
                // 如果需要允许用户继续创建，在这里恢复按钮状态
                $btn.prop('disabled', false).text('创建');
            },
            error: function(xhr) {
                // 请求失败也要恢复按钮，方便用户重试
                $btn.prop('disabled', false).text('创建');
                alert('创建失败，请检查后重试');
            }
        });
    });
});

方法2：用状态变量控制请求状态 #

有时候禁用按钮可能不够（比如网络延迟高，用户可能觉得按钮没反应），这时候可以用一个变量标记当前是否有请求在进行，彻底阻止重复触发：

$(function () {
    let isSubmitting = false; // 标记是否正在提交请求
    $('#createIncomeTypeBtn').on('click', function(e) {
        e.preventDefault();
        
        // 如果已有请求在处理，直接返回
        if (isSubmitting) return;
        
        isSubmitting = true;
        const $btn = $(this);
        $btn.text('创建中...');
        
        $.ajax({
            url: '/IncomeTypes/Create',
            type: 'POST',
            data: $('form').serialize(),
            success: function(response) {
                alert('创建成功！');
            },
            error: function(xhr) {
                alert('创建失败，请重试');
            },
            complete: function() {
                // 不管成功失败，都重置状态和按钮
                isSubmitting = false;
                $btn.text('创建');
            }
        });
    });
});

方法3：绑定单次点击事件（适合一次性提交场景） #

如果这个页面用户只需要提交一次（比如提交后跳转或关闭），可以用jQuery的one()方法，让按钮只响应第一次点击：

$(function () {
    $('#createIncomeTypeBtn').one('click', function(e) {
        e.preventDefault();
        $(this).text('创建中...');
        
        $.ajax({
            url: '/IncomeTypes/Create',
            type: 'POST',
            data: $('form').serialize(),
            success: function(response) {
                alert('创建成功！');
                // 这里可以做页面跳转、刷新列表等操作
            },
            error: function(xhr) {
                alert('创建失败，请刷新页面重试');
            }
        });
    });
});

额外提醒： #

• 如果你的按钮是通过异步局部视图加载的（比如分页后动态生成的），记得用事件委托绑定点击事件，比如：$(document).on('click', '#createIncomeTypeBtn', function() { ... })，确保动态元素能被正确绑定；
• 一定要在请求完成（无论成功失败）后恢复按钮或状态，不然用户在请求失败时会无法再次操作。

内容的提问来源于stack exchange，提问作者Rob