取消单击剑道网格中的绑定复选框

Question

参考这个问题：Adding bindeable checkbox column to grid

我在剑道网格中有一个布尔值复选框。当用户点击复选框时，他们会看到一个引导模式对话框，提示他们确认他们正在做什么。 （不用担心它的作用。这很好用。）

问题是，如果他们取消确认对话框，我想撤消他们对复选框的更改。 （我需要撤消它以使网格与数据保持同步，因为更新基础数据的调用只有在他们单击“确定”时才会发生。）

模板如下所示：

{
  title   : "Active",
  field   : "uaa",
  template: "<input name='active' class='userActiveToggle' type='checkbox' data-bind='checked: uaa' #= uaa ? checked='checked' : '' #/>"
}

javascript函数： “$('.modal-confirm .cancel') .click”函数中的代码不起作用。它会触发，但不会将复选框设置回其原始状态。 （而且，肯定有更好的方法来做到这一点......在两个点击函数中都需要解除绑定；否则它们将被绑定多次。但这不是我现在主要关心的问题。）

$("#AccountsGrid").on("click", ".userActiveToggle", function (e) {
    var grid = $('#AccountsGrid').data().kendoGrid;
    var tr = $(e.target).closest("tr");
    var data = grid.dataItem(tr);

    $('.modal-confirm').modal({ show : false, keyboard : true, backdrop : true });
    $('.modal-confirm .modal-header h3').text('Modify User');
    var userName = data.uau;
    var isActive = data.uaa;
    data.set('uaa', isActive);
    var modifyDescription =  isActive ?  'deactivate' :  'activate';

    $('.modal-confirm .modal-body p').html('Are you sure you want to '+ modifyDescription + ' the user, ' + userName + '?');
    $('.modal-confirm .cancel').html('Cancel');
    $('.modal-confirm .submit').html('OK').addClass('btn-danger');

    $('.modal-confirm .submit').click(function(e){
        if (hc.ActivateUser(userName, !isActive))
            data.set('uaa', !isActive);
        $('.modal-confirm').modal('hide');
        $('.modal-confirm .submit').unbind().on('click', null);
    });

    $('.modal-confirm .cancel') .click(function(e){
        grid.closeCell();
        var col = $(this).closest('td');
        grid.editCell(col);
        alert(isActive);
        data.set('uaa', isActive);
        $(e.target).checked= isActive;
        grid.closeCell(col);
        $('.modal-confirm .cancel').unbind().on('click', null);
    });

    $('.modal-confirm').modal('show');
});

我还尝试禁用模板中的复选框，这可行，但该功能根本不会触发。有人可以让我知道这是否可能吗？如果没有，我可以使用命令按钮。

（哦，在模态的提交单击中对 data.set 的调用可能是多余的。我最初是从我的命令按钮中复制了这段代码，然后添加了复选框。这里的计划是去掉按钮，如果我可以。）

Answer 1

试试$(e.target).attr('checked', isActive); 而不是$(e.target).checked= isActive;。

它最有效。

更新：
也许函数在改变值之前运行，所以你必须将值更改为!isActive。试试看！

更新 #2：
并且不要忘记使用 e.preventDefault... 如果是这样，您将不得不手动更改选中的参数。这就是你所需要的。确认后才更改变量。

你也可以使用 removeAttr()。

Answer 2

虽然我很讨厌回答自己的问题...答案是忘记复选框，而是使用带有按钮的命令替换它，但要根据绑定的数据动态更改按钮的文本。我的字段定义现在是这样的：

    { field: 'Manage users', template: '<a href="\\#" class="k-button link">#= uaa ? "Deactivate user" : "Activate user" #</a>', width: 125 },

下面是javascript函数。 （因为这是一个带有模板的命令，原来的问题，即需要撤消更改复选框状态的用户单击，不再是问题。我仍然使用确认对话框，但数据只是曾经更改过当用户单击确定时。）

$("#AccountsGrid").on("click", ".link", function (e) {
var grid = $('#AccountsGrid').data().kendoGrid;
var tr = $(e.target).closest("tr");
var data = grid.dataItem(tr);

$('.modal-confirm').modal({ show : false, keyboard : true, backdrop : true });
$('.modal-confirm .modal-header h3').text('Modify User');
var userName = data.uau;
var isActive = data.uaa;
var modifyDescription =  isActive ?  'deactivate' :  'activate';

$('.modal-confirm .modal-body p').html('Are you sure you want to '+ modifyDescription + ' the user, ' + userName + '?');
$('.modal-confirm .cancel').html('Cancel');
$('.modal-confirm .submit').html('OK').addClass('btn-danger');

$('.modal-confirm .submit').click(function(e){
    if (hc.ActivateUser(userName, !isActive))
        data.set('uaa', !isActive);
    $('.modal-confirm').modal('hide');
    $('.modal-confirm .submit').unbind().on('click', null);
});

$('.modal-confirm').modal('show');

});