当输入包裹在 DIV 中时，JS 复选框 enable/disable 组输入不起作用

Question

我一直在寻找一种方法来 enable/disable 具有相应复选框的输入组。终于找到了一个适合我的答案 here。但是，这仅在输入未包装在 DIV 中时有效。当我添加 Bootstrap-类 DIV 时，脚本停止工作。这是脚本：

$('input[type="checkbox"]').change(function(){
    $(this).nextUntil(':not(input:text)').prop('disabled', !this.checked)
}).change()

不太熟悉 JQuery，我发现 nextUntil() 方法将包含所有内容，直到下一个元素不是 "input:text"。所以，我尝试如下扩展：

$(this).nextUntil(':not(input:text, div)').prop('disabled', !this.checked)

或

$(this).nextUntil(':not(input:text), :not(div)').prop('disabled', !this.checked)

或

$(this).nextUntil(':not(input:text)', ':not(input:text)').prop('disabled', !this.checked)

没有任何效果。我确实读过有关列出多个选择器的内容，但显然不明白如何正确地做到这一点。

这里是HTML（动态生成）。我已经注释掉了破坏脚本的 DIV。这种方式确实可以，但是布局很难看。

echo "<div class=\"row\">";
//echo "<div class=\"form-group col-md-1\">";
echo "<input class=\"form-control\" type=\"checkbox\" />";
//echo "</div>";
//echo "<div class=\"form-group col-md-3\">";
echo "<input class=\"form-control\" type=\"text\" name=\"phrase_original[]\" value=\"".$original."\" />";
//echo "</div>";
//echo "<div class=\"form-group col-md-5\">";
echo "<input class=\"form-control\" type=\"text\" name=\"phrase_translated[]\" value=\"".$translated."\" />";
//echo "</div>";
echo "</div>";

请帮助我正确编写 nextUntil() 选择器。

Answer 1

nextUntil 不起作用的原因是因为它选择了后续的兄弟姐妹，如果您将复选框包裹在 <div> 中，它就没有。

如果您想 enable/disable 根据同一行中复选框的状态输入文本，最好结合使用 closest 和 find :

$('input[type="checkbox"]').on('change', function() {
    $(this).closest('.row').find('input[type="text"]').prop('disabled', !this.checked);
});

当输入包裹在 DIV 中时，JS 复选框 enable/disable 组输入不起作用

JS checkbox enable/disable groups of inputs NOT working when inputs wrapped in DIVs

jquery

nextuntil

Here's a fiddle