Флажок JS включает / отключает группы входов, которые НЕ работают, когда входы заключены в DIV

Question

Я искал способ включить / отключить группы входов с соответствующим флажком. Наконец нашел один ответ, который работает для меня здесь. Однако это работает только тогда, когда входные данные не заключены в DIV. Когда я добавляю DIV-классы Bootstrap-классов, скрипт перестает работать. Вот сценарий:

$('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:

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

Вот скрипка