Question

我有一个包含多列的表，其中2列是复选框。但是，我只希望在页面加载时启用第一列复选框。如果在第一列中选中了复选框，我只希望启用第二列复选框。

我当前的代码会这样做，但我希望选中复选框只启用/禁用同一行中的特定复选框，而不是整列中的所有复选框。

我该怎么做？这就是我到目前为止所做的：

$(document).ready(function() {
  $('.paid').attr('disabled', true);

  $('.selected').change(function() {
    $('.paid').attr('disabled', !this.checked);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--checkbox that is enabled on page load-->
<td align="center"><input type="checkbox" id="check" class="selected" name="selected"></td>

<!--checkbox that will be enabled/disabled based on checkbox above-->
<td align="center"><input type="checkbox" id="paid" class="paid" name="selected"></td>

Answer 1

＆＃13;

$(document).ready(function() {
  $('.paid').attr('disabled', true);

  $('.selected').change(function() {
    //find only the paid in the same row as the selected checkbox
    $(this).closest('tr').find('.paid').attr('disabled', !this.checked);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <table id="myTable">
            <tr>
                <td align="center"><input type="checkbox" id="check" class="selected" name="selected"></td>
                <td align="center"><input type="checkbox" id="paid" class="paid" name="selected"></td>
            </tr>
            <tr>
                <td align="center"><input type="checkbox" id="check" class="selected" name="selected"></td>
                <!-- checkbox that will be enabled/disabled based on checkbox above --> 
                <td align="center"><input type="checkbox" id="paid" class="paid" name="selected"></td>
            </tr>

        </table>

＆＃13;

Answer 2

这应该可以解决问题：

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

  $('.selected').change(function(){
    $(this).parent().siblings().find('.paid').attr('disabled', !this.checked);
  });
});

这样可以确保找到.paid复选框旁边的.selected复选框。

如果选中其他复选框，则启用复选框

2 个答案: