如何禁用和启用基于复选框的表行？

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    // 在这里编写处理复选框状态变化的代码
  });
});

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    var tableRow = checkbox.parentNode.parentNode; // 获取复选框所在的表行
    if (checkbox.checked) {
      tableRow.classList.add('disabled'); // 添加CSS类名来禁用表行样式
      tableRow.querySelectorAll('input, select, textarea').forEach(function(element) {
        element.disabled = true; // 禁用表行中的所有输入元素
      });
    } else {
      tableRow.classList.remove('disabled'); // 移除CSS类名来启用表行样式
      tableRow.querySelectorAll('input, select, textarea').forEach(function(element) {
        element.disabled = false; // 启用表行中的所有输入元素
      });
    }
  });
});

tr.disabled {
  opacity: 0.5; /* 降低禁用表行的透明度 */
  pointer-events: none; /* 禁用鼠标事件，防止用户与禁用表行交互 */
}