JavaScript：子孫要素をまとめて無効にする

テーブルの複数行をまとめて非表示にする方法として、tbodyタグでtrタグを挟んで、tbodyを指定して操作すると書きました。
ajya.hatenablog.jp

テーブルの中にはinputタグが複数あり、非表示にしたときは、inputタグを無効にしたかったので、

$(".rowall").css("display", "none").prop('disabled', true);

としてみました。

Dean Pugh

子孫要素をまとめて指定するにはfind()とeach()を組み合わせて使う

上記の記述では、テーブルの中のinputタグは無効にならなかったので、方法がないかと検索すると、find()でinputタグを指定して要素を検索して、each()で繰り返すという方法を見つけました。

見つけた方法を適用して、以下のように記述すると、テーブルの中のinputタグは全て無効になりました。

$(".rowall").css("display", "none");
$(".rowall").find("input").each( function(index, value) {
	$(this).prop('disabled', true);
});

メソッドチェーンで記述しても結果は同じだったので、最終的には以下のように記述しました。

$(".rowall").css("display", "none").find("input").each( function(index, value) {
	$(this).prop('disabled', true);
});

子孫要素を楽にまとめて無効にできるようになりました。
有効にするのも同じように書くことができます。