点击Kendo Grid行内下载按钮时取消同行复选框选中状态

我来帮你搞定这个问题！你现在遇到的情况是点击Download按钮会把所有复选框都取消选中，这大概率是因为你的download函数用了全局选择器选中了页面上所有.chkbx元素。要实现只取消当前行的复选框，关键是先定位到点击按钮所在的那一行，再操作该行内的复选框。

具体修改步骤： #

1. 保留你的Grid定义不变，自定义命令的配置不需要修改，还是绑定download函数就行：

@(Html.Kendo().Grid<GridViewModel>()
    .Name("Docgrid")
    .Columns(columns => {
        columns.Bound(c => c.read).Template("<input type='checkbox' #= IsUnread ? checked='checked': '' # class='chkbx' />");
        /* 更多列 */
        columns.Command(cmd =>{cmd.Custom("Download").Click("download");});
    })
    // 你的其他Grid配置（数据源、分页等）
)

2. 修改download JavaScript函数，通过点击事件定位当前行，再操作行内的复选框：

function download(e) {
    // 阻止按钮的默认行为，避免不必要的页面跳转
    e.preventDefault();
    
    // 找到当前点击按钮所在的表格行
    const currentRow = $(e.target).closest('tr');
    
    // 仅取消当前行内的复选框选中状态
    currentRow.find('.chkbx').prop('checked', false);
    
    // 额外：如果需要获取当前行的数据来执行下载逻辑（比如文档ID），可以这样做
    const grid = $('#Docgrid').data('kendoGrid');
    const rowData = grid.dataItem(currentRow);
    // 这里可以根据rowData里的字段执行下载，比如调用后端接口
    // 示例：window.location.href = `/Download/${rowData.DocumentId}`;
}

关键逻辑解释： #

• e.target指向你点击的那个Download按钮，用closest('tr')可以快速向上找到它所在的表格行，确保只操作当前行的元素
• currentRow.find('.chkbx')只会查找当前行内的复选框，不会影响其他行的选中状态
• 如果你的下载需要用到当前行的数据（比如文档的ID或路径），可以通过grid.dataItem(currentRow)拿到该行对应的GridViewModel实例，方便后续处理

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