0

我一直在寻找一种使用相应复选框启用/禁用输入组的方法。终于在这里找到了一个适合我的答案。但是，这仅在输入未包含在 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)

或者

$(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()选择器。

4

1 回答 1

0

原因nextUntil不起作用是因为它选择了进行中的兄弟姐妹，并且如果您将复选框包装在 a<div>中，则它没有任何内容。

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

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

这是一个小提琴

于 2017-07-25T14:53:44.780 回答