JavaScript：jQuery：参加者のチェックボックスのON/OFFで、同行者のチェックボックスがあるセルの背景色を変更する方法

昨日の記事でチェックボックスの有効/無効の切り替え方を書きました。

JavaScript：jQuery：参加者のチェックボックスのON/OFFで、同行者のチェックボックスの有効/無効を切り替える方法 - ソフトウェア開発者の日常

動作確認をして気づきましたが、チェックボックスの無効だけではチェックできないことが見た目にわかりづらいです。
チェックボックスを配置したテーブルのセルの背景色を変更して、有効/無効を見てわかりやすくすることにしました。

クラスの追加と削除で背景色を変更

複数の方法がありますが、クラスの追加と削除で背景色を変更しました。

実装は以下のとおりです。

CSS

td.non_select {
    background-color: #e0e0e0;
}

JavaScript

$("input.participant").bind("change", function (e) {
    var index = $("input.participant").index(this);
    if (this.checked) {
        $("input.accompanying_person1").eq(index).prop("disabled", false);
        $("input.accompanying_person2").eq(index).prop("disabled", false);
        $("input.accompanying_person3").eq(index).prop("disabled", false);
        $("input.accompanying_person4").eq(index).prop("disabled", false);
        $("input.accompanying_person5").eq(index).prop("disabled", false);
        $(".check_cell").eq(index).removeClass("non_select");
    } else {
        $("input.accompanying_person1").eq(index).prop("disabled", true);
        $("input.accompanying_person2").eq(index).prop("disabled", true);
        $("input.accompanying_person3").eq(index).prop("disabled", true);
        $("input.accompanying_person4").eq(index).prop("disabled", true);
        $("input.accompanying_person5").eq(index).prop("disabled", true);
        $(".check_cell").eq(index).addClass("non_select");
    }
});

クラスを使わず、直接背景色を変更する方法もあります。

$(".check_cell").eq(index).css("background-color", #e0e0e0);

今回は、初期表示時にクラス指定でセルの背景色を変えていたので、クラスの追加と削除で背景色を変更する方法を採用しました。