Question

我一直在寻找一种方法来启用/禁用具有相应复选框的输入组。终于找到了一个适合我的答案here。但是，这仅在输入未包含在DIV中时才有效。当我添加Bootstrap-classes 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>内，则它没有。

如果您想根据同一行中复选框的状态启用/停用文字输入，最好使用closest和find的组合：< / p>

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

JS复选框启用/禁用在DIV中包含输入时不起作用的输入组

1 个答案:

Here's a fiddle