如何在jQuery中实现表格行点击事件的启用与禁用控制？

我仔细排查了你提供的代码，找到了问题所在，同时给你整理了一套更可靠的实现方案：

原代码的核心问题 #

1. 事件绑定逻辑混乱：你尝试用off('click')移除表格行的点击事件，但后续恢复时没有正确重新绑定原有的点击处理逻辑，甚至可能出现重复绑定的情况。
2. 缺少状态控制：没有一个明确的变量来标记当前是否处于编辑模式，导致无法在事件触发时快速判断是否允许执行操作。
3. 禁用方式不彻底：仅移除点击事件不足以禁止行的选择（比如文本选中），也没有给用户直观的视觉反馈。

可行的实现方案 #

我推荐用状态变量+CSS类控制的方式来实现，既简洁又可靠，代码如下：

CSS 部分（添加禁用样式）

/* 禁用行的样式，禁止点击、选择，给视觉反馈 */
.table-row-disabled {
  pointer-events: none;
  user-select: none;
  background-color: #f0f0f0;
  cursor: not-allowed;
}

JavaScript 部分

// 全局状态变量，标记是否处于编辑模式
let isInEditMode = false;

// 封装表格行的点击处理函数，方便复用
function handleRowClick() {
  // 如果处于编辑模式，直接终止操作
  if (isInEditMode) return;
  
  // 这里放你原来的行点击逻辑，比如选中行、触发详情等
  $(this).toggleClass('selected');
  console.log('表格行被点击/选中');
}

// 初始化绑定行点击事件
$('table tr').on('click', handleRowClick);

// 编辑按钮点击事件
$('.edit-btn').on('click', function() {
  isInEditMode = true;
  // 给所有表格行添加禁用类，同时禁止选择
  $('table tr').addClass('table-row-disabled');
  console.log('进入编辑模式，表格行已禁止点击/选择');
});

// 保存按钮点击事件
$('.save-btn').on('click', function() {
  // 先处理你的保存逻辑...
  
  // 恢复行功能
  isInEditMode = false;
  $('table tr').removeClass('table-row-disabled');
  console.log('保存完成，恢复表格行的点击/选择功能');
});

// 取消按钮点击事件
$('.cancel-btn').on('click', function() {
  // 先处理你的取消逻辑（比如重置表单）...
  
  // 恢复行功能
  isInEditMode = false;
  $('table tr').removeClass('table-row-disabled');
  console.log('取消编辑，恢复表格行的点击/选择功能');
});

方案优势 #

1. 状态控制更清晰：通过isInEditMode变量可以全局控制行的可交互状态，即使CSS类失效，也能通过判断状态阻止操作。
2. 禁用更彻底：CSS的pointer-events: none直接禁止行上的所有点击事件，user-select: none禁止文本选中，同时背景色和光标样式给用户明确的视觉反馈。
3. 代码更易维护：把行点击逻辑封装成单独的函数，避免重复编写代码，后续修改逻辑只需要改这一个函数即可。

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