How to disable other td if td in first is equal test?

Question

I want to disable second or third td if value in first td is for example equal to test

My example table looks like this:

  <table id="ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData">
    <tr>
      <td >John</td>
      <td ><input type="text"  name="lname" ></td>
      <td >Blah</td>
    </tr>
    <tr>
      <td >John</td>
      <td ><input type="text"  name="lname" ></td>
      <td >Blah</td>
    </tr>
  </table>

I tried with that jquery code to disable but didn't work.

$("#ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData tr").each( function( index, val ){
    if($(this).find("td:first-child").text() == 'Test;') {
        $(this).find("td:last-child").prop('disabled',true);
    }
});

If I use hide method everything work fine by I want to use disable Can someone explain hwy disable didint work in this case

Answer 1

You cannot disable a table cell straightforwardly.

What you can do is based on your condition check apply a class to the row and then use pointer-events: none; CSS on that class

Working sample:

$("#ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData tr").each(function() {
  if ($(this).find("td:first-child").text() == 'Test') {
    $(this).addClass('disabled');
  }
});

tr.disabled {
  pointer-events: none;
  opacity: 0.5
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData">
  <tr>
    <td>Test</td>
    <td><input type="text" name="lname"></td>
    <td>Blah</td>
  </tr>
  <tr>
    <td>John</td>
    <td><input type="text" name="lname"></td>
    <td>Blah</td>
  </tr>
</table>