如何使用 JavaScript HTML 在多行表中通过复选框启用下拉列表

Question

我要控制the dropdownlist to be enabled when the checkbox is checked by respective rows. 我目前的进度我设法启用和禁用下拉列表，但它不受相应行的控制。

只要选中该复选框，就会启用所有下拉列表。

php代码部分来自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>

Answer 1

使用$(this).closest('tr').find('.selection');可以找到对应的选择框属于更改复选框的行。

closest() 函数查找与选择器匹配的第一个父级。由于您使用的是表格，我们可以使用 tr 选择器选择行并在行中找到相应的选择元素。

还更改了选择框的启用和禁用方式。最好更改属性然后更改属性。而且代码也更短。不过你的方法也行得通。

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