如何禁用“保存更改”按钮，直到进行更改？

Question

我正在使用类似于示例Grid Batch Editing的编辑机制，但我的按钮看起来很不一样。

由于存在这种差异，保存更改和取消按钮禁用更改将会很有意义，然后当您按下保存或取消按钮时，它们应再次禁用。我如何实现这一目标？

Answer 1

在这里管理回答我自己的问题。

更改按钮状态的功能：

function changeSaveAndCancelButtonState(enable) {
    $(".k-grid-save-changes").kendoButton({ enable: false })
        .data("kendoButton").enable(enable);
    $(".k-grid-cancel-changes").kendoButton({ enable: false })
        .data("kendoButton").enable(enable);
}

在编辑数据时启用按钮（常规单元格）：

@(Html.Kendo().Grid<DeuarTestValue>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(c => c.Sample).Editable("enabledRegularEdit");
      })
    // Insert code for data source etc etc
);

function enabledRegularEdit() {
    changeSaveAndCancelButtonState(true);

    // return true to indicate that this the cell can be edited
    return true;
}

默认情况下禁用按钮，然后点击：

function disableSaveAndCancelButtonState() {
    changeSaveAndCancelButtonState(false);
}

// Disable themselves on-click
var but = $(".k-grid-save-changes").kendoButton({ click: disableSaveAndCancelButtonState });
var but = $(".k-grid-cancel-changes").kendoButton({ click: disableSaveAndCancelButtonState });

// And Disable them by default.
changeSaveAndCancelButtonState(false);

注意：这不考虑是否实际编辑了单元格，只是单元格已进入编辑模式。如果有人知道如何只在正确编辑时才能使它工作？

由于帖子中的图片有复选框，因此不需要处理它们，因为它们不是通过标准的可编辑功能进行编辑的。

在编辑数据时启用按钮（复选框）：

columns.Bound(c => c.Approved)
    .ClientTemplate("<input type='checkbox' #= Approved ? checked='checked' : '' # class='Approvedchkbx'/>")
    .Editable("disableEdit");

function disableEdit() {
    return false;
}
$("#grid .k-grid-content").on("change", ".Approvedchkbx", function (e) {
    var grid = $("#grid").data("kendoGrid"),
        dataItem = grid.dataItem($(e.target).closest("tr"));

    changeSaveAndCancelButtonState(true);
    dataItem.set("Approved", this.checked);
});

Answer 2

您可以在点击后立即停用该按钮，并确保在您的工作完成后重新启用该按钮。

$('#your-button').on('click', function (e) {
    e.preventDefault();

    $(this).prop('disabled', true);

    //Do your work

    //Once everything is done

    $(this).prop('disabled', false);
})