使復選框所需的輸入文本相乘

Question

我有一個有很多行的表，每一行都有一個復選框和一個輸入。

我正在制作一個代碼段，該代碼段將在檢查同一行上的復選框時將輸入重新排列。

這是我嘗試過的：

 $(document).ready(function() { $('#prod[1]').click(function() { if ($(this).prop('checked')) { $('#qty_1').attr('required', ''); } else { $('#qty_1').removeAttr('required'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <tr> <td><input type="checkbox" id="prod[1]"><label for="prod[1]">name</label></td> <td><input type="text" id="qty_1" name="qty_1"></td> </tr>

由於“[]”，這個不起作用，但是，如果我刪除它們，它們將起作用......

我不知道如何使它與“[]”或每一行一起工作（prod[2]、prod[3] 等......）

謝謝！

Answer 1

這些括號在 css（屬性選擇器）中具有特殊含義，要在 jquery 選擇器中使用這些字符，需要使用雙反斜杠\\來轉義它們。
查看代碼段，在文本框中寫下任何內容，然后單擊復選框並查看控制台日志結果。

 $(document).ready(function() { var prod = $('#prod\\[1\\]'); prod.on('click', function() { if ($(this).prop('checked')) { $('#qty_1').attr('required', ''); } else { $('#qty_1').removeAttr('required'); } console.log($('#qty_1').val()); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <tr> <td><input type="checkbox" id="prod[1]"><label for="prod[1]">name</label></td> <td><input type="text" id="qty_1" name="qty_1"></td> </tr>