时间戳

首页 > 解决方案 > 使复选框所需的输入文本相乘

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

问题描述

我有一个有很多行的表，每一行都有一个复选框和一个输入。

我正在制作一个代码段，该代码段将在检查同一行上的复选框时将输入重新排列。

这是我尝试过的：

$(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] 等......）

谢谢！

标签： javascripthtml

解决方案

这些括号在 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>

推荐阅读