如何在取消选中剑道复选框之前发出警报

Question

因此，如果用户想要选中一个复选框，如果他/她有权取消勾选，它将提示一个对话框。所以当他没有权利时，国家会保持不变。

我正在使用带有剑道树视图的 angularjs。

   $scope.options = {
   checkboxes: {
       checkChildren: true,
   },
   loadOnDemand: false,
   check: onCheck,
   dataSource: $scope.treeData,
   template: '{{ dataItem.text}}',
   schema: {
       model: {
           children: "List"
       }
   }


function onCheck(e) {
   var currentItem = e.sender.dataItem(e.node);
   console.log(currentItem.rights);
   //if currentItem.rights= '0001'
   //dataItem.checked = true else false (something like this)

}

Answer 1

Kendo UI 的事件有时设计得很糟糕。示例here：check 事件被阻止，但它仍然执行更改，default JS behaviour 中没有发生的事情。您可以做的是对更改进行回滚：

if (!window.confirm("Do you have the rights to change this?")) {
    window.setTimeout(function (node) {
        this.expand(node); // expand() creates the child list if not created yet
        $(node).find('input[type="checkbox"]').prop("checked", null);
    }.bind(this, e.node));
}

Demo

IKR 很丑，但我想不出更好的方法来做到这一点。好消息是 checkbox 用户的点击不是一个真正的复选框，它是一个 span，它以某种方式在内部改变了一个真正隐藏的复选框的状态，而你 can't prevent it's default click behaviour! 也许有人在他们的论坛中可以提供更好的解决方案，但我不确定。

更新

事实上，sn-p 中存在逻辑错误。 check 事件应该是：

check: function(e) {
    let dataItem = this.dataItem(e.node);

    if (!window.confirm("Do you have the rights to change this?")) {
        window.setTimeout(function (node, currentState) {
            this.expand(node); // Expand created the child list if not created yet
            $(node).find('input[type="checkbox"]').prop("checked", (currentState ? "checked" : null));
            this.dataItem(node).set("checked", currentState);
        }.bind(this, e.node, !dataItem.checked));
    }
}

Updated demo.

您报告的错误正在发生，因为它仅更改元素状态，而不是 DataItem 的 checked 属性，因此在内部小部件的行为很奇怪。此外，还有另一个错误，即 cancel 操作只是将复选框更改为 unchecked 状态，这是错误的，因为用户可能是 cenceling 一个选中的复选框，所以它的状态必须保持选中状态。