Jquery JS复选框启用/禁用在DIV中包装输入时不工作的输入组

我一直在寻找一种通过相应的复选框启用/禁用输入组的方法。终于找到了一个适合我的答案。 但是，这仅在输入未包装在div中时有效。当我添加引导类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)

或

或

什么都不管用。我确实读过关于列出多个选择器的内容，但显然不知道如何正确地执行

下面是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>";

echo”“；
//回声“；
回声“；
//回声“；
//回声“；
回声“；
//回声“；
//回声“；
回声“；
//回声“；
回声“；

---

请帮助我正确编写

nextUntil（）

选择器。

之所以

nextUntil

不起作用，是因为它选择了继续进行的同级，如果您将复选框包装在

中，则它没有任何选项

如果要根据同一行中复选框的状态启用/禁用文本输入，最好结合使用

最近的

和

查找

：

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

---

非常感谢。现在一切都好了。只有一个小问题：不知道为什么，当我第一次加载页面时，所有输入都被启用。要禁用它们，我需要选中该框，然后取消选中。我在你的小提琴例子中看到这个问题没有发生。我通过将

disabled=“disabled”

添加到标记中解决了这个问题。在示例fiddle中，我正在触发复选框上的

change

（

.trigger（'change'）

）事件来设置它们的状态

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>";

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