0

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

4

1 に答える 1