disabling a link inside a table column if checkbox is unchecked in the same row

Question

this is my code:

i want to disable these two buttons if my checkbox from below is unchecked

    <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>

//checkbox

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

Answer 1

Add an event listener for the change event on the checkbox which toggles a .disabled class on the links parent td which ignores pointer events and greys them out.

Here's an example:

 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

Use jquery for this problem

Set id for the checkbox like this:

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

then add a listener in jquery to check if user has check the checkbox like this:

$("#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
  }
});