質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

21430閲覧

チェックボックスのチェックや値をリロードしても維持したい

Cake

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/06/16 03:48

下記の様にチェックが入ったら入力欄が有効化するものがあるのですが、リロード時にチェック状態をみて維持しようとしても、ChromeやIE・edgeではチェックや値がクリアされてしまいます。
firefoxのみリロードしてもチェックや値がクリアされず想定どおりの動きをします。

ChromeやIE・edgeに対応するには、cookieかlocalstorage、sessionstorageを使わなければ対応できないのでしょうか?

ご存知の方がおられましたら、ご回答よろしくお願いします。

html

1<p><input type="checkbox" name="edit_flg" value="" class="checkbox" id="change" />入力する</p> 2<table id="change_list"> 3<tr> 4<th>入力1</th> 5<td><input type="text" value="" /></td> 6</tr> 7<tr> 8<th>入力2</th> 9<td><input type="radio" name="test" value="" checked="checked" />A <input type="radio" name="test" value="" />B</td> 10</tr> 11<tr> 12<th>入力3</th> 13<td><input type="checkbox" name="test" value="" checked="checked" />A <input type="checkbox" name="test" value="" />B</td> 14</tr> 15<tr> 16<th>入力4</th> 17<td><textarea value="" style="width:250px"></textarea></td> 18</tr> 19</table>

javascript

1$(function(){ 2 $("input#change").each(function(){ 3 var chk = $(this).prop('checked'); 4 if(chk == true){ 5 $("table#change_list input,table#change_list textarea").removeAttr("disabled"); 6 }else{ 7 $("table#change_list input,table#change_list textarea").prop('disabled', true); 8 } 9 return true; 10 }); 11 $("input#change").click(function(){ 12 var chk = $(this).prop('checked'); 13 if(chk == true){ 14 $("table#change_list input,table#change_list textarea").removeAttr("disabled"); 15 }else{ 16 $("table#change_list input,table#change_list textarea").prop('disabled', true); 17 } 18 return true; 19 }); 20});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

リロード時にチェック状態をみて維持しようとしても、ChromeやIE・edgeではチェックや値がクリアされてしまいます。

firefoxのみリロードしてもチェックや値がクリアされず想定どおりの動きをします。

Firefoxは確かにリロード時やブラウザバック時に状態を保存することが多いですが、どちらかというとそちらがイレギュラーです。状態を保存するには書かれているようにcookieかlocalstorage、sessionstorageを利用することになります。

投稿2016/06/16 05:02

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

リロードでデータ保持は本来はやってはいけないことでしょう
リロード時点でリセットされるのが正しい処理です
(むしろリロードはユーザーの自己責任です)

ページの遷移時にデータを保持したいというのであれば
サーバー経由でデータを受け渡せばよいだけなので

投稿2016/06/16 05:01

yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ブラウザの仕様で、Firefoxだけ特殊な気がします。
Firefoxでキャッシュしないようにするには、次の方法で対応可能です。

text

1Cache-Control: no-store

再読み込み時に値を維持するなら、他の方法を組み合わせて実現するのがベストだと思います。

投稿2016/06/16 04:33

moonphase

総合スコア6621

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問