対応するチェックボックスで入力のグループを有効/無効にする方法を探していました。最後に、ここで私に役立つ1つの答えを見つけました。ただし、これは入力が 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()
セレクターを正しく書くのを手伝ってください。