javascript - 如果同一行中的复选框未选中，则禁用表列内的链接

Question

这是我的代码:

如果未选中下面的复选框，我想禁用这两个按钮

    <td><a href="manage-bookings.php?aeid=<?php echo htmlentities($result- 
    >id);?>" onclick="return confirm('Do you really want to Confirm this 
    booking?')"> Confirm</a> /

    <a href="manage-bookings.php?eid=<?php echo htmlentities($result->id);? 
    >" onclick="return confirm('Do you really want to Cancel this 
    Request?')"> Cancel</a>
    </td>

//复选框

    <td><input type="checkbox" value="" name="requirements"></td>

Answer 1

为复选框上的 change 事件添加一个事件监听器，该复选框会在链接父 td 上切换 .disabled 类，从而忽略指针事件并将它们变灰。

这是一个例子:

const containers = document.querySelectorAll('.link-container')

document
  .querySelector('#checkbox')
  .addEventListener('change', e => {
    containers.forEach(container => {
      container.classList.toggle('disabled')
    })
  })

table, th, td {
  border: 1px solid #aaa;
  border-collapse: collapse;
  padding: 6px;
}

td.disabled a {
  pointer-events: none;
  color: #ccc;
}

<table>
  <tr>
    <td class="link-container">
      <a href="https://www.google.com">Visit Google</a>
    </td>
     <td class="link-container">
      <a href="https://www.microsoft.com">Visit Microsoft</a>
    </td>
    <td>
      <input type="checkbox" id="checkbox" checked>
    </td>
  </tr>
</table>