AngularJS中KendoGrid仅用复选框选行且取消行高亮的问题

我之前也碰到过一模一样的需求，折腾了一会儿终于搞定了，给你分享两个关键步骤：

1. 配置Grid限制仅复选框触发选择 #

首先在Grid的初始化配置里，加上checkboxOnly: true，确保只有点击复选框才会选中行，避免点击行其他区域误触发选中状态：

$("#grid").kendoGrid({
    selectable: {
        mode: "multiple",
        type: "checkbox",
        checkboxOnly: true // 核心配置：仅复选框触发选择
    },
    // 其他Grid配置...
});

2. 覆盖CSS彻底移除选中行的高亮样式 #

接下来需要覆盖Kendo默认的选中行和悬停选中行的样式，把这些状态的背景、边框、文字颜色都重置为和普通行一致：

/* 移除选中行的所有默认高亮样式 */
.k-grid tr.k-state-selected,
.k-grid tr.k-state-selected:hover,
.k-grid tr.k-state-selected:focus {
    background-color: transparent !important;
    border-color: inherit !important;
    color: inherit !important;
}

/* 可选：如果只想保留复选框列的选中视觉提示 */
.k-grid tr.k-state-selected td:not(.k-selectable-cell) {
    background-color: transparent !important;
}

小提示： #

• 确保你的自定义CSS是在Kendo官方主题CSS之后加载的，这样优先级更高，可能不需要!important（如果加载顺序正确的话）；
• 如果还是有残留的悬停变色，检查一下是否有其他自定义样式或者主题的子元素样式冲突，也可以追加覆盖td的hover状态：

.k-grid tr.k-state-selected:hover td {
    background-color: transparent !important;
}

这样设置之后，就只有复选框会显示选中状态，整行不管是选中后还是鼠标悬停选中行，都不会再变色啦！

内容的提问来源于stack exchange，提问作者Flo