history.back()で戻った時にボタンのdisabledをチェックの状態によって有効・無効にしたい

やりたいこと

ページ内のチェックボックス群の中で、一つもチェックがない時は、検索ボタンを非活性に。
一つでもボタンにチェックが入っている場合は、活性化したいです。
history.back()でこのページに戻ったときに
ページ内のチェックボックスにチェックが入った状態になっている場合は、ボタンを活性化したいです。

困っていること・解決したいこと

history.back()で、この検索ページに戻ったときに
ページ内のチェックボックスにチェックが入った状態になっている場合は、ボタンを活性化させたいです。

試したこと

下記のぺージを参考に、戻った時にボタンを活性化できるかテスト。
https://qiita.com/smitho/items/60b496785216b1aefe49
結果は、Edge、IEではボタンのdisabledが取れず、活性化しませんでした。（chrome、Firefoxは活性化しました。）

window.onpageshow = function(){
	$("#searchBtn").each(function(i, elem) {
		$(elem).attr('disabled', false);
	});
};

戻った時は、ページをリフレッシュさせてしまう方法を試し、そちらは実現できたのですが
history.back()でもボタンの活性・非活性を操作できる方法をぜひとも勉強したいと思い
色々試してみたのですが知識もなく、手詰まりのため質問させていただいた次第です。

コードは下記です。

html
1<main class="wrapper">
2      <form method="" action="search.html">
3
4        <section class="areaCheckContainer">
5
6          <h2 class="title01">お店のエリアを選択</h2>
7
8          <div class="flexContainer">
9            <label class="prefecture" for="all"><input type="checkbox">全エリア選択</label>
10            <div class="check__boxes">
11              <label class="topArea__prefecture"><input type="checkbox" name="nationwide" id="all" value="すべて選択">すべて選択</label>
12            </div>
13          </div>
14
15          <section id="check_itemArea" class="flex">
16              <div class="flexContainer">
17                <label class="btnArea" for="all_kanto"><input type="checkbox" name="allChecked" id="all_kanto">関東エリア</label>
18                <div class="check__boxes" id="check_kanto">
19                  <label class="checkItem"><input type="checkbox" name="kanto" class="list" value="東京都">東京都</label>
20                  <label class="checkItem"><input type="checkbox" name="kanto" class="list" value="埼玉県">埼玉県</label>
21                  <label class="checkItem"><input type="checkbox" name="kanto" class="list" value="千葉県">千葉県</label>
22                  <label class="checkItem"><input type="checkbox" name="kanto" class="list" value="神奈川県">神奈川県</label>
23                </div>
24              </div>
25              <div class="flexContainer">
26                <label class="btnArea" for="all_chubu"><input type="checkbox" name="allChecked" id="all_chubu">中部エリア</label>
27                <div class="check__boxes" id="check_chubu">
28                  <label class="checkItem"><input type="checkbox" name="chubu" class="list" value="愛知県">愛知県</label>
29                  <label class="checkItem"><input type="checkbox" name="chubu" class="list" value="岐阜県">岐阜県</label>
30                  <label class="checkItem"><input type="checkbox" name="chubu" class="list" value="三重県">三重県</label>
31                  <label class="checkItem"><input type="checkbox" name="chubu" class="list" value="静岡県">静岡県</label>
32                </div>
33              </div>
34
35              <div class="flexContainer">
36              <label class="btnArea" for="all_kansai"><input type="checkbox" name="allChecked" id="all_kansai">関西エリア</label>
37                <div class="check__boxes" id="check_kansai">
38                  <label class="checkItem"><input type="checkbox" name="kansai" class="list" value="大阪府">大阪府</label>
39                  <label class="checkItem"><input type="checkbox" name="kansai" class="list" value="京都府">京都府</label>
40                  <label class="checkItem"><input type="checkbox" name="kansai" class="list" value="兵庫県">兵庫県</label>
41                </div>
42              </div>
43            </section>
44        </section>
45
46        <section>
47          <h2 class="title01">商品を選択</h2>
48          <label class="topArea__btn--syohin" for="all_syohin"><input type="checkbox" name="allChecked_syohin" id="all_syohin">すべて選択</label>
49          <div class="topArea__boxes" id="boxes_syohin">
50            <label><input type="checkbox" name="syohin" class="list" value="りんご">りんご</label>
51            <label><input type="checkbox" name="syohin" class="list" value="バナナ">バナナ</label>
52            <label><input type="checkbox" name="syohin" class="list" value="オレンジ">オレンジ</label>
53          </div>
54        </section>
55
56        <section>
57          <h2 class="title01">産地を選択</h2>
58          <label class="topArea__btn--country" for="all_quantity"><input type="checkbox" name="allChecked_quantity" id="all_quantity">すべて選択</label>
59          <div class="topArea__boxes" id="boxes_quantity">
60            <label><input type="checkbox" name="country" class="list" value="中国">中国</label>
61            <label><input type="checkbox" name="country" class="list" value="タイ">タイ</label>
62            <label><input type="checkbox" name="country" class="list" value="フィリピン">フィリピン</label>
63          </div>
64        </section>
65
66        <div class="mt30">
67          <button type="submit" id="searchBtn">検索</button>
68        </div>
69      </form>
70    </main>
71
72    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
73    <script src="test.js"></script>

css
1.wrapper {
2  width: 970px;
3}
4.flex {
5  display: flex;
6}
7.flexContainer {
8  width: 180px;
9}
10.flexContainer .btnArea {
11  background: orange;
12  width: 150px;
13}
14.btnArea {
15  cursor: pointer;
16  display: block;
17  font-weight: bold;
18  margin-bottom: 10px;
19  user-select: none;
20}
21.prefecture {
22  cursor: pointer;
23  display: block;
24  background: #87cefa;
25  font-weight: bold;
26  margin-right: 20px;
27  width: 150px;
28}
29.check__boxes {
30  margin-bottom: 20px;
31}
32.check__boxes .checkItem {
33  display: block;
34  margin-right: 20px;
35  user-select: none;
36}
37.check__boxes .checkItem input[type=checkbox] {
38  margin: -4px 7px 0 3px;
39}
40.title01 {
41  font-size: 18px;
42  border-bottom: 5px solid #ccc;
43  color: #333;
44}
45.mt30 {
46  margin-top: 30px;
47}
48.prefecture input[type="checkbox"],
49.btnArea input[type="checkbox"] {
50  display: none;
51}

jQuery
1//全選択
2//条件に1つでもチェックが入っているときだけ検索ボタンを有効にする
3$(function(){
4$('#all').on('change',function(){
5$('[name=allChecked]').prop('checked',$(this).prop('checked')).trigger('change');
6});
7$('[name=allChecked]').on('change',function(){
8$(this).closest('.flexContainer').find('.list').prop('checked',$(this).prop('checked'));
9$('#all').prop('checked',$('[name=allChecked]:not(:checked)').length==0);
10});
11$('.list').on('change',function(){
12var flg=$(this).closest('.check__boxes').find('.list:not(:checked)').length==0;
13$(this).closest('.flexContainer').find('[name=allChecked]').prop('checked',flg);
14$('#all').prop('checked',$('.list:not(:checked)').length==0);
15});
16});
17
18// 関東エリア
19$(function() {
20  $('#all_kanto').on('click', function() {
21    $("input[name='kanto']").prop('checked', this.checked);
22  });
23  $("input[name='kanto']").on('click', function() {
24    if ($('#check_kanto :checked').length == $('#check_kanto :input').length) {
25      $('#all_kanto').prop('checked', true);
26    } else {
27      $('#all_kanto').prop('checked', false);
28    }
29  });
30});
31// 中部エリア
32$(function() {
33  $('#all_chubu').on('click', function() {
34    $("input[name='chubu']").prop('checked', this.checked);
35  });
36  $("input[name='chubu']").on('click', function() {
37    if ($('#boxes_chubu :checked').length == $('#check_chubu :input').length) {
38      $('#all_chubu').prop('checked', true);
39    } else {
40      $('#all_chubu').prop('checked', false);
41    }
42  });
43});
44// 近畿エリア
45$(function() {
46  $('#all_kansai').on('click', function() {
47    $("input[name='kansai']").prop('checked', this.checked);
48  });
49  $("input[name='kansai']").on('click', function() {
50    if ($('#boxes_kansai :checked').length == $('#check_kansai :input').length) {
51      $('#all_kansai').prop('checked', true);
52    } else {
53      $('#all_kansai').prop('checked', false);
54    }
55  });
56});
57// 商品
58$(function() {
59  $('#all_syohin').on('click', function() {
60    $("input[name='syohin']").prop('checked', this.checked);
61  });
62  $("input[name='syohin']").on('click', function() {
63    if ($('#boxes_syohin :checked').length == $('#boxes_syohin :input').length) {
64      $('#all_syohin').prop('checked', true);
65    } else {
66      $('#all_syohin').prop('checked', false);
67    }
68  });
69});
70// 個数
71$(function() {
72  $('#all_quantity').on('click', function() {
73    $("input[name='country']").prop('checked', this.checked);
74  });
75  $("input[name='country']").on('click', function() {
76    if ($('#boxes_quantity :checked').length == $('#boxes_quantity :input').length) {
77      $('#all_quantity').prop('checked', true);
78    } else {
79      $('#all_quantity').prop('checked', false);
80    }
81  });
82});
83
84
85//条件に1つでもチェックが入っているときだけ検索ボタンを有効にする
86$(function(){
87  // 初期状態のボタンは無効
88  $("#searchBtn").prop("disabled", true);
89    // チェックボックスの状態が変わったら（クリックされたら）
90    $("input[type='checkbox']").on('change', function () {
91        // チェックされているチェックボックスの数
92        if ($(".wrapper input[type='checkbox']:checked").length > 0) {
93          // ボタン有効
94          $("#searchBtn").prop("disabled", false);
95        } else {
96          // ボタン無効
97          $("#searchBtn").prop("disabled", true);
98        }
99    });
100});

ぜひご教示頂きたく存じます。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、onpageshow は IE11 で対応なので互換モードになっていないか確認しましょう。

判定は一か所でしたほうがいいでしょう。
すでに書かれているので、あとは trigger() を呼ぶだけにしたほうがわかりやすくなるかと思います。

jQuery
1//条件に1つでもチェックが入っているときだけ検索ボタンを有効にする
2// チェックボックスの状態が変わったら（クリックされたら）
3$(document).on('change', 'input[type="checkbox"]', function(_event) {
4    // チェックされているチェックボックスの数
5    if ($(".wrapper input[type='checkbox']:checked").length > 0) {
6        // ボタン有効
7        $("#searchBtn").prop("disabled", false);
8    } else {
9        // ボタン無効
10        $("#searchBtn").prop("disabled", true);
11    }
12});
13
14$(function(){
15    // 初期状態のボタンは無効
16    $('input[type="checkbox"]').eq(0).trigger('change');
17});
18
19window.onpageshow = function(){
20    $('input[type="checkbox"]').eq(0).trigger('change');
21};