使用 JavaScript 和 jQuery 取消勾選 ASP.NET MVC 中 Kendo Grid 選擇列中的特定行：逐步指南

Question

我的 ASP.NET MVC 5 專案中有一個 Kendo Grid。其中一列是選擇列，如果它滿足特定條件，我將嘗試取消選擇複選框。我已設法取消選擇該複選框。問題是它只是更改 UI，但沒有刪除從 this.select() 中取消選擇的內容。只需取消選取使條件 = true 的特定行並保留選取那些為 false 的行即可。

總之，如果條件= true，我想取消選中該框，將其從this.select() 中刪除，從this.selectedKeyNames() 中刪除，並從this._selectIds() 中刪除它。不要從 UI 中的表中刪除該行。

下面的程式碼不是我正在使用的實際程式碼，而是與之類似的程式碼。下面的程式碼可能無法運行。

#

function onChange(e) {
   var selectedRows = this.select();
   for(var i = 0; i < selectedRows.length; i++){
       selectedRows[i].find("input[type='checkbox']").prop('checked', false);
       if( 2 > 6) {
          alert("You can't select this");
    }
  }
}

Answer 1

似乎是change 事件無法在事件處理程序中阻止，因此您可以新增dataBound 事件處理程序並將點擊處理程序附加到選擇的複選框。如果滿足條件 - 停止事件的傳播：

dataBound: function(){
          var grid = this;
          grid.tbody.find('tr .k-select-checkbox').on('click', function(e){
            var dataItem = grid.dataItem($(this).closest("tr"));
            if(dataItem.Discontinued){
              $(this).prop('checked', !$(this).prop('checked'));
              e.stopImmediatePropagation();
              kendo.alert(`${dataItem.ProductName} is discontinued, you cannot select it!`)
            }
          })
        }

在此範例中，您無法選擇停產商品。