使复选框所需的输入文本相乘

Question

I have a table with many rows and each row has a checkbox and an input.

I'm tring to make a code snippet that will make the input reqiured when the checkbox on the same row is checked.

Here is what I have tried:

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

This one isn't working because of the "[]", however, if I remove them, they will work...

I dont know how to make it work with the "[]" or for each row (prod[2], prod[3], etc...)

Thank you!

Answer 1

Those brackets have special meaning in css(attribute selector), to use these characters in your jquery selector need to escape them by using double backslashes \\ .
Check out the snippet, write down anything inside the textbox before clicking on the check-box and watch the console log result.

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