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

i've been looking way enable/disable groups of inputs corresponding checkbox. found 1 answer works me here. however, works when inputs not wrapped in divs. when add bootstrap-classes divs, script stops working. here script:

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

not acquainted jquery, i've found out nextuntil() method include until next element not "input:text". so, tried expanding follows:

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

or

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

or

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

nothing works. did read listing multiple selectors apparently don't understand how correctly it.

here html (dynamically generated). i've commented out divs break script. way work, layout ugly.

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

please me write nextuntil() selectors correctly.

the reason nextuntil won't work because selects proceeding siblings, , if you're wrapping checkbox inside of <div> doesn't have any.

if want enable/disable text inputs based on state of checkbox in same row, you'd better off using combination of closest , find:

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

here's fiddle