戻るボタンで戻った時、元々非表示の項目を表示したままにしたい

前提・実現したいこと

フォーム画面でselectから特定の選択肢を選んだ時、隠し項目を表示させるようにしております(画面A)。

ですが遷移先の画面(画面B)から画面Aに戻った時、
selectの状態は保持されてますが、隠し項目は非表示になっております。

この隠し項目を、画面を戻った時にも表示された状態にしたいです。

javascript
1$(function() {
2 $(".category").change(function() {
3 　var category_val = $(".category").val();
4 　if(category_val == "kakusi_on") {
5　　　$('.other').css('display', 'table-row');
6　　　$('.other input').prop('disabled',false);
7　　　} else {
8　　　$('.other').css('display', 'none');
9　　　$('.other input').prop('disabled',true);
10　　}
11　});
12});

css
1.other{
2 display:none;
3}

html
1<table class="form_wrapper">
2　<tr>
3　　<th><p>カテゴリ</p></th>
4　　<td>
5　　　<select name="カテゴリ" class="category">
6　　　　<option value="">選択してください</option>
7　　　　<option id="kakusi_on">選択肢A</option>
8　　　　<option>選択肢B</option>
9　　　</select>
10　　</td>
11　</tr>
12
13　<tr class="other">
14 　<th><p>隠し項目</p></th>
15 　<td>
16　　　<input type="radio" name="隠し項目" value="ラジオボタンA" id="button_a" disabled="disabled">
17　　　<label for="button_a">ラジオボタンA</label>
18　　　<input type="radio" name="隠し項目" value="ラジオボタンB" id="button_b" disabled="disabled">
19　　　<label for="button_b">ラジオボタンB</label>
20　　</td>
21　</tr>
22</table>

現状上記で画面Bに遷移して画面Aに戻ると、選択肢は「選択肢A」のままですが「class="other"」の要素が非表示になってしまいます。
画面Aで「選択肢A」を選んでた時は、ブラウザバックしても「class="other"」の要素を表示したままにできないでしょうか。

試したこと

メールフォームの入力された内容によって表示非表示の切り替えについて
https://teratail.com/questions/28705

上記の記事の上の回答を参考にしましたが、
#parentを.categoryに変えたら、「隠し項目」の選択を選んでも隠し項目が表示されなくなってしまいました。

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

回答1件

ベストアンサー

まず

<option id="kakusi_on">選択肢A</option>

↓↓↓

としてください。
あとはロード時にtriggerを発行すればよいでしょう

javascript
1$(function() {
2 $(".category").on('change',function() {
3 　var category_val = $(".category").val();
4 　if(category_val == "kakusi_on") {
5　　　$('.other').css('display', 'table-row');
6　　　$('.other input').prop('disabled',false);
7　　　} else {
8　　　$('.other').css('display', 'none');
9　　　$('.other input').prop('disabled',true);
10　　}
11　}).trigger('change');
12});