将变量连接为函数内的输入名称答案

【问题标题】：Concatenate a variable as a input name inside a function将变量连接为函数内的输入名称
【发布时间】：2021-05-20 16:12:48
【问题描述】：

我正在尝试在此函数中连接值“行”但无法正常工作，我正在尝试在输入名称上传递行的字符串值。

    var row = 'm_89375312';
$("input[name='" + row + "']").change(function () {
    var max = 3;
    if ($("input[name='" + row + "']:checked").length == max) {
        $("input[name='" + row + "']:checked").attr('disabled', 'disabled');
        $("input[name='" + row + "']:checked").removeAttr('disabled');
    } else {
        $("input[name='" + row + "']:checked").removeAttr('disabled');
    }
})

我做错连接了吗？

【问题讨论】：

也发布您的 html
if 块中的代码的目标是什么？
'if' 验证并将用户检查的复选框数量限制为 3，如果用户检查的数量超过该数量，则禁用该行的其他检查

标签： javascript jquery string concatenation

【解决方案1】：

连接很好，尽管最好不要那样重复。另外，使用prop，而不是attr，来设置/清除像disabled：.prop("disabled", true")和.prop("disabled", false)这样的道具。

我猜你想在选中max 框时禁用该名称的所有未选中匹配项，并在未选中max 框时启用它们。如果是这样：

var row = "m_89375312";
var rowSelector = "input[name='" + row + "']";
$(rowSelector).change(function () {
    var max = 3;
    if ($(rowSelector + ":checked").length == max) {
        // Disable the ones that aren't checked yet
        $(rowSelector + ":not(:checked)").prop("disabled", true);
    } else {
        // Re-enable any that used to be disabled
        $(rowSelector).prop("disabled", false);
    }
});

现场示例：

var row = "m_89375312";
var rowSelector = "input[name='" + row + "']";
$(rowSelector).change(function () {
    var max = 3;
    if ($(rowSelector + ":checked").length == max) {
        // Disable the ones that aren't checked yet
        $(rowSelector + ":not(:checked)").prop("disabled", true);
    } else {
        // Re-enable any that used to be disabled
        $(rowSelector).prop("disabled", false);
    }
});

<div>
      <label>
        <input type="checkbox" name="m_89375312">
        A
      </label>
</div>
<div>
      <label>
        <input type="checkbox" name="m_89375312">
        B
      </label>
</div>
<div>
      <label>
        <input type="checkbox" name="m_89375312">
        C
      </label>
</div>
<div>
      <label>
        <input type="checkbox" name="m_89375312">
        D
      </label>
</div>
<div>
      <label>
        <input type="checkbox" name="m_89375312">
        E
      </label>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在现代环境中，我也可能使用 ES2015+ 模板文字而不是字符串连接：

const rowSelector = `input[name="${row}"]`;

【讨论】：