JavaScript：jQuery：参加者のチェックボックスのON/OFFで、同行者のチェックボックスの有効/無効を切り替える方法

代表の参加者が選んだセミナーのみ、同行者が参加できるようにシステムを作成して欲しいと要望がありました。

入力する画面では制限をもうけず、入力内容を確認する画面で判定して表示することも考えましたが、手間がかかります。
入力画面で代表の参加者が選んだ状態に合わせて、同行者も選べるように制限することにしました。

クラスを割り当てて処理

セミナーは複数あり同行者も複数人です。
方法を考えた結果、代表の参加者と同行者それぞれのチェックボックスに固有のクラスを割り当てて、代表の参加者のチェックボックスのON/OFFイベントで処理することにしました。

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

$("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);
    } 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);
    }
});

participantクラスの何番目のチェックボックスがON/OFFされたのか求めて、ONだったらaccompanying_person1～accompanying_person5を有効、OFFだったらaccompanying_person1～accompanying_person5を無効にしています。