我是JQuery和 AJAX 世界的新手。我有一个页面，其中有一个表包含客户名单和他们租的电影。每一列都有一个“登记”按钮。一旦用户单击此按钮，将调用一个API，该API将更新后端表中的当前日期时间，然后反映在UI上。

@{
    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
                //https://codepedia.info/jquery-get-table-cell-td-value-div
                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>

}

目前，当我单击Check in按钮时，它会调用API，更新DB表中的数据，并重新加载UI上的表以反映添加的Date Time。
Screenshot of the UI
我需要帮助在禁用这个'签入'按钮，一旦它被点击， AJAX 调用成功，因为用户可以继续点击按钮一次又一次，即使在API调用成功，数据库中的数据更新。

<button class ='btn-link js-checkin' data-rental-id =" + data + ">Check-In</button>"

我试图添加代码行，目前注解，以禁用按钮，但没有一个工作。

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();
                            }
                        });
                    }
                });