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

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> 

Answer 2

使用jQuery的这个问题

设置复选框的ID，如下所示：

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

然后在jquery中添加一个侦听器，以检查用户是否选中了以下复选框：

$("#requirements").on('click', function(){
  if($(this). prop("checked") == true){
   alert("Checkbox is checked." );
   link here is enabled

  }
  else if($(this). prop("checked") == false){
   alert("Checkbox is unchecked." );
   link here is disabled
  }
});