How To Enable Dropdownlist By Checkbox In Multirow Table Using JavaScript HTML

I want to control the dropdownlist to be enabled when the checkbox is checked by respective rows. My current progress I manage to enable and disable the dropdownlist but its not controlled by the respective rows.

Whenever the checkbox is checked, all dropdownlist were enabled.

the php code is partly from html:

<td>
    <select class="selection" name="lotDist[]" > 
    <option></option>';

    ==== sql queries in here ====

    while ($row2 = sqlsrv_fetch_array($stmt,SQLSRV_FETCH_ASSOC))
    {
        echo '
        <option value="'.$row["LotNo"].' / '.$row2["Grouping"].' - '.$row2["InBulkForm"].'"> 
        '.$row2["Grouping"].' - '.$row2["InBulkForm"].'</option> ';
    }  
    echo '
    </select>
</td>
<td>'.$row["LoadingWeek"].'</td>
<td>                   
    <input type="checkbox" class="chkBox" id="chkBox" name="cBox[]" value="'.$row["LotNo"].'" '.$check.'>
</td>



<script>    
    $(document).ready(function() {
        $('.selection').attr('disabled', 'disabled');

        var $checkBox = $('.chkBox');

        $checkBox.on('change', function(e) {
            //get the previous element to us, which is the select
            var $select = $('.selection')

            if (this.checked) {
                $select.removeAttr('disabled');
            } else {
                $select.attr('disabled', 'disabled');
            }
        });
    });
</script>

With $(this).closest('tr').find('.selection'); you can find the corresponding select box the belongs to the row of the changed checkbox.

The closest() function finds the first parent that matches the selector. Since you are using a table we can select the row with the tr selector and find the corresponding select element within the row.

Also changed the way the select box is enabled and disabled. It's better to change the property then the attribute. and code is shorter too. However your method works as well.

$(document).ready(function() {
  $('.selection').attr('disabled', 'disabled');

  var $checkBox = $('.chkBox');

  $checkBox.on('change', function(e) {
    var $select = $(this).closest('tr').find('.selection');

    $select.prop('disabled', !this.checked);

    /* This works too but its better to change the property and the code is shorter when using the this.checked boolean.
    
    if (this.checked) {
      $select.removeAttr('disabled');
    } else {
      $select.attr('disabled', 'disabled');
    }
    
    */
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select class="selection" name="lotDist[]">
        <option>1</option>
        <option>2</option>
      </select>
    </td>
    <td>week</td>
    <td>
      <input type="checkbox" class="chkBox" id="chkBox" name="cBox[]" value="'.$row[" LotNo "].'" '.$check.'>
    </td>
  </tr>
  <tr>
    <td>
      <select class="selection" name="lotDist[]">
        <option>1</option>
        <option>2</option>
      </select>
    </td>
    <td>week</td>
    <td>
      <input type="checkbox" class="chkBox" id="chkBox" name="cBox[]" value="'.$row[" LotNo "].'" '.$check.'>
    </td>
  </tr>
</table>