如何在foreach记录上实现启用/禁用按钮？

<ul id="record-list">
  <li data-status="enabled">
    Record 1
    <button class="toggle-btn">禁用</button>
  </li>
  <li data-status="enabled">
    Record 2
    <button class="toggle-btn">禁用</button>
  </li>
  <li data-status="disabled">
    Record 3
    <button class="toggle-btn">启用</button>
  </li>
</ul>

// 获取记录列表
const recordList = document.getElementById('record-list');

// 获取所有的启用/禁用按钮
const toggleBtns = recordList.getElementsByClassName('toggle-btn');

// 使用foreach循环遍历按钮
Array.from(toggleBtns).forEach(function(btn) {
  // 获取按钮所在的记录
  const record = btn.parentNode;
  
  // 获取记录的状态
  const status = record.getAttribute('data-status');
  
  // 根据状态更新按钮的文本和样式
  if (status === 'enabled') {
    btn.textContent = '禁用';
    btn.classList.add('disabled');
  } else {
    btn.textContent = '启用';
    btn.classList.remove('disabled');
  }
  
  // 添加点击事件监听器
  btn.addEventListener('click', function() {
    // 切换记录的状态
    if (status === 'enabled') {
      record.setAttribute('data-status', 'disabled');
      btn.textContent = '启用';
      btn.classList.remove('disabled');
    } else {
      record.setAttribute('data-status', 'enabled');
      btn.textContent = '禁用';
      btn.classList.add('disabled');
    }
  });
});