如果選中其他復選框，則啟用復選框

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

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

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

Answer 2

這應該可以解決問題：

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

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

這樣可以確保它在.paid復選框旁邊找到了.selected復選框。