点击按钮且Ajax API调用成功后禁用UI上的Check-In按钮

我是jQuery和Ajax新手，页面上有个展示客户及租赁电影列表的表格，每行对应一个“Check-In”按钮。点击按钮会调用API更新后端数据表的归还日期，之后表格重载同步UI。目前API调用、数据库更新都正常，但即便是已完成归还的条目，用户仍能重复点击Check-In按钮，尝试了多种禁用按钮的代码都没生效，求解决。

原代码 #

@{
    ViewBag.Title = "CheckIn";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>CheckIn</h2>

<table id="rentals" class="table table-bordered table-hover">
    <thead>
        <tr>
            @*<th>Rental Id</th>*@
            <th>Customer Id</th>
            <th>Customer Name</th>
            <th>Movie Id</th>
            <th>Movie Name</th>
            <th>Date Rented</th>
            <th>Date Returned</th>
            <th>Check-In</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

@section scripts{
    <script>
        $(document).ready(function () {
            /*Logic To map the data to the table*/
            var rentalTable = $("#rentals").DataTable({
                /*using ajax to call the api*/
                ajax: {
                    url: "/api/rentals",
                    dataSrc: ""
                },
                /*Specify Column Mappings*/
                columns: [
                    { data: "customersId" },
                    { data: "customersName" },
                    { data: "movieId" },
                    { data: "movieName" },
                    { data: "dateRented" },
                    { data: "dateReturned" },
                    {
                        data: "id",
                        render: function (data) {
                                return "<button class ='btn-link js-checkin' data-rental-id =" + data + ">Check-In</button>"
                        }
                    }
                ]
            });

            $("#rentals").on("click", ".js-checkin", function () {
                var button = $(this);

                // get the current row
                var currentRow = $(this).closest("tr");
                var custId = currentRow.find("td:eq(0)").text(); // get current row 1st TD value
                var movId = currentRow.find("td:eq(2)").text(); // get current row 2nd TD

                var rentalData = { customerId: custId, movieId: movId }
                button.attr("disabled", true);

                bootbox.confirm("Are you sure you want to check in this movie ?", function (result) {
                    if (result) {
                        $.ajax({
                            url: "/api/rentals",
                            method: "put",
                            data: rentalData,
                            success: function () {
                                $('#rentals').DataTable().ajax.reload();
                            }
                        });
                    }
                });
            });
        });
    </script>
}

尝试过的无效代码片段 #

bootbox.confirm("Are you sure you want to check in this movie ?", function (result) {
    if (result) {
        $.ajax({
            url: "/api/rentals",
            method: "put",
            data: rentalData,
            success: function () {
                //$(".js-checkin").attr("disabled", true);
                //$('.js-checkin').prop('disabled', true);
                //$(this).prop('disabled', true);

                //var button = rentalTable.buttons(['.js-checkin'])
                //rentalTable.row(button.remove()).draw();

                $('#rentals').DataTable().ajax.reload();
            }
        });
    }
});

问题根源 #

1. 表格通过ajax.reload()重载后，所有行和按钮都是重新渲染的，之前设置的disabled状态会丢失。
2. 没有根据后端返回的dateReturned字段控制按钮的显示/禁用状态，导致已归还条目仍有可点击按钮。

修复方案 #

1. 根据归还状态动态渲染按钮 #

修改DataTable的列渲染逻辑，判断dateReturned是否存在，已归还则显示禁用按钮或文本：

columns: [
    // 保留原有列配置...
    {
        data: null,
        render: function (data, type, row) {
            // 已归还则显示禁用状态的按钮
            if (row.dateReturned) {
                return "<button class='btn-link js-checkin' disabled>已归还</button>";
            }
            // 未归还显示可点击按钮
            return "<button class='btn-link js-checkin' data-rental-id='" + row.id + "'>Check-In</button>";
        }
    }
]

2. 点击时立即禁用按钮，避免重复操作 #

在点击事件中先禁用按钮，用户取消确认或请求失败时恢复状态：

$("#rentals").on("click", ".js-checkin", function () {
    var button = $(this);
    var originalText = button.text();
    // 禁用按钮并提示处理中
    button.prop("disabled", true).text("处理中...");

    var currentRow = button.closest("tr");
    var custId = currentRow.find("td:eq(0)").text();
    var movId = currentRow.find("td:eq(2)").text();
    var rentalData = { customerId: custId, movieId: movId };

    bootbox.confirm("确定要归还这部电影吗？", function (result) {
        if (result) {
            $.ajax({
                url: "/api/rentals",
                method: "put",
                data: rentalData,
                success: function () {
                    // 重载表格后，按钮会根据最新归还状态重新渲染
                    rentalTable.ajax.reload();
                },
                error: function () {
                    // 请求失败恢复按钮状态
                    button.prop("disabled", false).text(originalText);
                    bootbox.alert("归还失败，请重试");
                }
            });
        } else {
            // 用户取消确认，恢复按钮状态
            button.prop("disabled", false).text(originalText);
        }
    });
});

关键说明 #

• 用prop("disabled", true)替代attr("disabled", true)，jQuery中设置表单元素禁用状态推荐用prop方法。
• 表格重载后，按钮会根据最新的dateReturned数据重新渲染，从根源避免已归还条目出现可点击按钮。
• 添加错误处理逻辑，避免请求失败后按钮一直处于禁用状态。

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