チェックボックスにチェックが入っていない場合はボタンを非活性にする

やりたいこと

ページ内のチェックボックスが1つでも選択されていない場合は
ボタンを非活性にしたいです。
#####現在の状態
https://codepen.io/mnmds/pen/LYRrOzm

困っている・分からないこと

①各項目の「すべて選択ボタン」をクリックしても検索ボタンがクリックできない。
②ブラウザの戻るボタンで戻ってしまった場合に、チェックはそのままの状態でも検索ボタンが押せない状態になってしまう。

※ボタンの非活性とは関係ないのですが
青い背景の全エリア選択と、その下のすべて選択のチェックボックスの動作を同じ動作にしたいのですが
現在、青い背景の「全エリア選択」方にチェックが入らない状態です…。

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

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

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

ご教授いただけませんでしょうか。よろしくお願いいたします。

m.ts10806

2021/01/25 04:06

「ブラウザ標準の戻るボタンからの挙動は保証しない」のが良いかと思います。ブラウザによって対応が違うこともありますし。画面内に戻るボタン入れては

pondering

2021/01/25 04:12

m.ts10806様追記・修正依頼をありがとうございます。遷移先のページに、戻るボタンは設置しております。しかし、ブラウザバックしてしまったときの挙動があまりにも変なのが気になりもし方法があるのなら・・・と思っております。（自分でも$(window).on('load', function())など試してみたのですがうまくいかず…）

m.ts10806

2021/01/25 04:14

ですから「ブラウザバックの挙動は保証しない」という形を提案しています。実際にそうしてるところは多いです。コストに結果が見合いません。

pondering

2021/01/25 04:17 編集

コストに結果が見合いません＞そうなのですね。ご指摘くださりありがとうございます。