ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

トップ > JavaScript > JavaScript：一覧表の中のラジオボタンの周囲の色の変更方法

JavaScript：一覧表の中のラジオボタンの周囲の色の変更方法

JavaScript

一覧表の中にラジオボタンがあり、他の要素の選択により、ラジオボタンの有効／無効を切り替えていました。

ラベル1
ラベル2

ラジオボタンのボタンの有効／無効を切り替えると同時に、ラジオボタンが配置されているセルの色も変更されているので、どのように色の変更を行っているのか確認すると、ラジオボタンが配置されているセルのHTMLが

<th>ラベル1</th>
<td><label><input type="radio" name="radioselect" id="radio1">ラジオボタン1</label></td>

となっていて、JavaScriptは、

// disableformは、cssで色を指定
$("#radio1").parent().parent().addClass("disableform");

となっていました。
parent()の1個目でlabelタグ、2個目でtdタグと辿って、セルの色の変更をしていました。

f:id:AJYA:20180710124520p:plain
unsplash-logoThought Catalog

項目名も色を変えたい

ラジオボタンの有効／無効に合わせて、ラジオボタンが配置されているセルの色を変更して、がわかりやすくなっています。
ラジオボタンの項目名のセルの色も変更してた方がよりわかりやすいという意見があったため、
JavaScriptは、

// disableformは、cssで色を指定
$("#radio1").parent().parent().addClass("disableform");
$("#radio1").parent().parent().parent().children('th').addClass("disableform");

とすれば、項目名のセルの色も変更できました。


動的に生成する一覧表の出力項目の変更が頻繁に発生したために、メソッドチェーンでラジオボタンが配置されているセルの色の変更をするという考えにいたったようです。
本来であれば、tdタグにidを割り当てて、直接指定するのがよりよい方法だと考えています。