ページ読み込み時、ブラウザバック時、更新時に状況を維持していてほしい

Question

ご閲覧いただきありがとうございます。
現在実装している処理としては下記の２つです。

①２つのチェックボックスを選ぶと2つ以上チェックボックスが選択できないようにdisableをかける。
②チェックを入れると背景色が変わる、外すと色が消える

こちらですが、ページ読み込み時、ブラウザバック時、更新時に状況を維持していてほしいのですが初心者なもんでして上手くいきません。。
現在の状況としては下記の通りです。

①の実装　⇒　ページ読み込み時、ブラウザバック時、更新時にdisableのはずが、チェックボックスが入ったまま3つ目が選択できてしまう。
②の実装　⇒　ページ読み込み時、ブラウザバック時、更新時にチェックは入っているが背景色が反映されていない。

という感じです。宜しくお願い致します....

; (function ($) {
    "use strict";
    window.onload = function(){
        CheckLimit();
        CheckColor();
        }
        
function CheckLimit() {
    $('table input').change(function () {
        // チェックが入ったチェックボックスの個数を変数に格納
        var len = $('table input:checked').length;
        // チェックが2つ以上入ったら
        if (len >= 2) {
            // disabledを付けてチェックできなくする
            $('table input').not(':checked').prop('disabled', true);
            // チェックが2つ未満だったら
        } else {
            // disabledを削除してチェックできるようになる
            $('table input').not(':checked').prop('disabled', false);
        }
    });
}

function CheckColor() {
    $('table input').change(function () {
        var prop = $(this).prop('checked');
        // チェックをつけたら
        if (prop) {
            // 背景色class設定
            $(this).closest('td').addClass('CheckedSession');
        } else {
            // 背景色classリセット
            $(this).closest('td').removeClass('CheckedSession');
        }
    });
}

$(function () {
    CheckLimit();
    CheckColor();
});
}) (jQuery);

<table class="table">
          <tbody>
          <tr>
            <th>時間</th>
            <th>9:00 ~ 10:00</th>
            <th>10:00 ~ 11:00</th>
            <th>12:00 ~ 14:00</th>
            <th>14:00 ~ 16:00</th>
          </tr>
          <tr>
            <th>7月22日(水)</th>
            <td>
             <div class="code">&nbsp;<input type="checkbox" name="c1" value="1" disabled=""></div>
            </td>
          </tr>
</table>

Answer 1

こんな感じですかね・・・ブラウザバックは微妙です

Comments

[yambejp]

<style>
.code{height:100px;background-Color:yellow}
.code.active{background-Color:lime}
</style>
<script>
$(function(){
$(':checkbox').on('change',function(){
$(this).closest('.code').toggleClass('active',$(this).prop('checked'));
var flg=$(':checkbox:checked').length==2;
$(':checkbox:not(:checked)').prop('disabled',flg);

}).trigger('change');
});
</script>
<div class="code"><input type="checkbox" name="c1" value="1"></div>
<div class="code"><input type="checkbox" name="c1" value="2"></div>
<div class="code"><input type="checkbox" name="c1" value="3"></div>
<div class="code"><input type="checkbox" name="c1" value="4"></div>