如何实现勾选表格行复选框时激活对应行的Update/Delete链接

看起来你遇到的核心问题是：循环生成的ID没有和对应行的链接正确绑定，导致所有复选框操作都只影响第一行的链接。下面给你几种靠谱的解决方案，从简单到灵活都有：

方法一：用DOM相对位置定位（推荐，无需依赖ID） #

这种方法不用纠结ID生成，直接通过复选框找到它所在的行，再定位行内的链接，逻辑更清晰也不容易出错。

修改后的HTML结构（结合你的模板循环） #

{% for item in your_data_list %}
<tr>
  <td><input type="checkbox" onchange="toggleLink(this)"></td>
  <td>{{ item.some_field }}</td>
  <!-- 给链接加统一的类名，方便查找 -->
  <td><a href="/update/{{ item.id }}" class="update-link" disabled>Update</a></td>
  <td><a href="/delete/{{ item.id }}" class="delete-link" disabled>Delete</a></td>
</tr>
{% endfor %}

对应的JS函数 #

function toggleLink(checkBox) {
  // 找到当前复选框所在的表格行
  const currentRow = checkBox.closest('tr');
  // 在当前行内找到更新和删除链接
  const updateLink = currentRow.querySelector('.update-link');
  const deleteLink = currentRow.querySelector('.delete-link');

  // 根据复选框状态启用/禁用链接
  const isChecked = checkBox.checked;
  updateLink.disabled = !isChecked;
  deleteLink.disabled = !isChecked;

  // 可选：添加样式区分禁用/启用状态
  if (isChecked) {
    updateLink.classList.remove('text-gray-500');
    deleteLink.classList.remove('text-gray-500');
  } else {
    updateLink.classList.add('text-gray-500');
    deleteLink.classList.add('text-gray-500');
  }
}

方法二：正确使用forloop.counter绑定唯一ID #

如果你坚持要用ID的方式，需要确保把循环计数器传递给JS函数，动态拼接对应ID：

修改后的HTML结构 #

{% for item in your_data_list %}
<tr>
  <!-- 把循环计数器作为参数传给toggleLink -->
  <td><input type="checkbox" onchange="toggleLink(this, {{ forloop.counter }})"></td>
  <td>{{ item.some_field }}</td>
  <!-- 用计数器生成唯一ID -->
  <td><a href="/update/{{ item.id }}" id="update-{{ forloop.counter }}" disabled>Update</a></td>
  <td><a href="/delete/{{ item.id }}" id="delete-{{ forloop.counter }}" disabled>Delete</a></td>
</tr>
{% endfor %}

对应的JS函数 #

function toggleLink(checkBox, counter) {
  // 用计数器动态拼接ID，找到对应行的链接
  const updateLink = document.getElementById(`update-${counter}`);
  const deleteLink = document.getElementById(`delete-${counter}`);

  updateLink.disabled = !checkBox.checked;
  deleteLink.disabled = !checkBox.checked;

  // 样式控制同上
}

方法三：事件委托（适合大量行的高效方案） #

如果你的表格行数很多，给每个复选框绑定事件会浪费性能，用事件委托只给表格绑定一个事件即可：

修改后的HTML结构（无需onchange属性） #

<table id="data-table">
{% for item in your_data_list %}
<tr>
  <td><input type="checkbox" class="row-checkbox"></td>
  <td>{{ item.some_field }}</td>
  <td><a href="/update/{{ item.id }}" class="update-link" disabled>Update</a></td>
  <td><a href="/delete/{{ item.id }}" class="delete-link" disabled>Delete</a></td>
</tr>
{% endfor %}
</table>

对应的JS代码 #

// 给表格绑定一个change事件
document.getElementById('data-table').addEventListener('change', function(e) {
  // 判断触发事件的是行内复选框
  if (e.target.classList.contains('row-checkbox')) {
    const checkBox = e.target;
    const currentRow = checkBox.closest('tr');
    const updateLink = currentRow.querySelector('.update-link');
    const deleteLink = currentRow.querySelector('.delete-link');

    const isChecked = checkBox.checked;
    updateLink.disabled = !isChecked;
    deleteLink.disabled = !isChecked;
    
    // 样式控制
    updateLink.classList.toggle('text-gray-500', !isChecked);
    deleteLink.classList.toggle('text-gray-500', !isChecked);
  }
});

为什么你之前的代码失效？ #

你原来的JS里用了固定的document.getElementById("agreeLink1")，不管点击哪一行的复选框，都会找到页面中第一个ID为agreeLink1的元素——也就是第一行的链接。通过上面的方法，要么用相对位置定位，要么动态生成对应ID，就能精准操作当前行的链接了。

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