在进行更改之前如何禁用“保存更改”按钮？答案

【问题标题】：How to disable the "Save Changes" button until changes are made?在进行更改之前如何禁用“保存更改”按钮？
【发布时间】：2018-01-26 04:34:48
【问题描述】：

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

由于这种差异，进行保存更改和取消按钮禁用更改会很有意义，然后当您按下保存或取消按钮时，它们应该再次禁用。我如何做到这一点？

【问题讨论】：

标签： javascript c# asp.net telerik-grid telerik-mvc

【解决方案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);
});

【讨论】：

【解决方案2】：

您可以在单击按钮后立即禁用该按钮，并确保在您完成工作后重新启用它们。

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

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

    //Do your work

    //Once everything is done

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

【讨论】：

我似乎无法让它发挥作用。我怀疑这是因为 Telerik 网格创建的按钮实际上不是 HTML 按钮。