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};

投稿2021/03/08 11:22

x_x

総合スコア13749

pondering

2021/03/08 14:24

ご回答を頂きありがとうございます。どのブラウザでもhistory.back()でボタンの活性・非活性ができました。そしてIE11の互換モードにひとつチェックが入っておりました。このようなところも影響があるのですね。教えて頂きありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

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

やりたいこと

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

試したこと

関連した質問