如何在ASP.NET MVC中实现点击按钮确认后禁用指定按钮

首先要注意两个核心要点：

• 循环生成按钮时，不要给多个按钮设置相同的id="disablebtn"，这违反HTML规范，建议仅保留class="delmenu"和data-id属性即可。
• 在Ajax回调中要正确引用触发点击的当前按钮，需提前保存该按钮的jQuery对象。

修改后的JavaScript代码 #

$('.delmenu').click(function() {
    var msg = "Are you sure want to disable?";
    var id = $(this).attr("data-id");
    // 保存当前点击的按钮对象，方便在回调中引用
    var $currentBtn = $(this);
    
    if (confirm(msg) == true) {
        $.ajax({
            url: '@Url.Action("Delete", "ID01")',
            data: { id: id },
            type: 'post',
            cache: false,
            async: true, // 不推荐同步请求，改为异步避免阻塞浏览器
            dataType: 'json',
            success: function (data) {
                if (data == "Success") {
                    // 禁用当前按钮
                    $currentBtn.prop('disabled', true);
                    // 搭配Bootstrap的话，添加禁用样式让按钮视觉上变灰
                    $currentBtn.addClass('disabled');
                    
                    // 注意：如果执行页面跳转，刷新后前端设置的禁用状态会重置
                    // 若需持久化禁用状态，后台接口要修改对应数据状态，页面加载时通过判断逻辑控制按钮是否禁用
                    location.href = "/ID01/Index";
                }
            }
        });
    } else {
        return false;
    }
});

额外补充说明 #

1. 按钮id重复问题：原代码循环生成的按钮共用id="disablebtn"，会导致DOM元素标识冲突，建议直接删除该id属性，通过class="delmenu"统一绑定事件。
2. 同步请求弊端：原代码的async: false会让浏览器在请求期间处于阻塞状态，严重影响用户体验，改为async: true（jQuery Ajax默认值）更合理。
3. 持久化状态处理：如果跳转页面后希望按钮保持禁用状态，需要在后台Delete接口中修改对应数据的状态（比如将Expired设为EnableType.YES），后续页面加载时，通过原有的else if判断逻辑，不再渲染可点击的Disable按钮，或者直接渲染为禁用状态。

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