このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

jQueryMobile:ラジオボタンの選択がJavaScriptで変更できない

このエントリーをはてなブックマークに追加
イメージ


こんにちは、さち です。

先日、スクフェス イベントノルマ計算 を作っていたとき
jQuery でラジオボタン <input type="radio"> の選択を変更しても
それが反映されずに困り果てました。
jQuery のコードを見るだけで頭が痛くなるくらいに…!

最終的には解決できたので
今回はその時に学んだことをまとめていきます。




<input> <select> を操作できない?

jQuery Mobile の <input> や <select> を操作する時は
単に HTML を書き換えるだけではダメ!
見た目(UI)に反映されません。

原因は、UI として見えている部分が <input> ではないから。

これだけでは分かりにくいと思うのでもう少し具体的に見てみます。
例えば、「ラジオボタン」。
jQuery Mobile ではラジオボタンは下のように表示されます。
操作画面

実は、このボタン部分 <input> ではありません。
見えているのは <label> で
jQuery Mobile がボタンのように振る舞わせているんです。
(実際、HTML の <label> を削除すると後から <input> が出てくる)

この <label> にタッチすると
jQuery Mobile が <label> の背景や文字の色を変更します。

しかし、この変更が行われるのは <label> にタッチした時。
だから、JavaScript で <input> の選択を書き換えても
見た目(UI)が変化しないわけです。

<input> の状態を見た目(UI)に反映させるには
さらに、「リフレッシュ」の操作が必要です。




選択を変更したら「リフレッシュ」しよう!

「リフレッシュ」の操作自体は非常に簡単です。

例えば、ラジオボタンの場合は次のようになります。
<input type="radio" name="event" value="macaron">
<input type="radio" name="event" value="scorematch">

$('input[name="event"]').val(['scorematch']);
$('input[name="event"]').checkboxradio('refresh');
//まとめて1行で書くと
$('input[name="event"]').val(['scorematch']).checkboxradio('refresh');

例では、「type="radio"」の <input> ですが
「type="checkbox"」の場合もまったく同じ方法でOK。

ドロップダウンリスト <select> の場合は次のとおり。
<select name="difficulty">
<option value="easy">イージー</option>
<option value="normal">ノーマル</option>
<option value="hard">ハード</option>
<option value="expert">エキスパート</option>
</select>

$('select[name="difficulty"]').val('expert');
$('select[name="difficulty"]').selectmenu('refresh');
//まとめて1行で書くと
$('select[name="difficulty"]').val('expert').selectmenu('refresh');

ちなみに、リフレッシュ時に「('refresh', true)」と記述すると
その要素をリビルド(再構築)できます。
(要素の表示に問題がなければ基本的にリビルドは不要)




おまけ - ラジオボタンの操作でハマった話

この項は、先日私がハマった
ラジオボタン操作の初歩的なミスについて書きます。
ちゃんとリフレッシュしてもラジオボタンの表示がおかしい!
という人は読んでみてください。
同じ原因でハマっているかもしれません。

ドロップダウンリスト <select> と
ラジオボタン <input type="radio"> は
複数の選択肢の中から1つを選ぶという点が共通しています。

jQuery を使って
ドロップダウンリスト <select> の選択を変更するときは
「$('select').val('a')」と書けばいいですよね。

同じ要領で考えると
ラジオボタン <input type="radio"> の選択を変更するときは
「$('input[type="radio"]').val('a')」と書けばいい。

しかし、この記述では <input type="radio"> を変更できません。
<input type="radio"> の「value」の値が
「a」に書き換えられるだけです。

同じ記述をテキスト入力 <input type="text"> にすれば
「value」の値が書き換えられるだけなのは当たり前なんですが
「ラジオボタン=選択肢」という意識があるせいで
<select> と同じ仕様だと思い込んでしまいました。

ラジオボタン <input type="radio"> の選択を変更するときは
「$('input[type="radio"]').val(['a'])」です。

val の値を [ ] (ブラケット、角括弧)で囲むんです!
これすごく重要!マジ重要!超重要!おに重要!
先生が『これ絶対テストに出すぞ~』って言うレベルです。

<input> はこのタグ自体が「value」を持つのに対し
<select> は持っていないんですよね。
<select> の場合、「value」を持つのは <option> です。
この違いが jQuery の動作の違いとして出ているわけです。

ものすごく基本的なことですが
jQuery の勉強をはじめたばかりの人は気をつけましょう。
私はたったこれだけのことに3日ほど時間を無駄にしました。
思い込みはホント怖いよ!
解説をしっかり読んでいなかった私が悪いんですけどね…。



【参考サイト】

   → jQueryMobileでセレクトボックスやラジオボタンをjsから操作するときの注意点 - roundrop
   → フォームの基本 - jQuery Mobile 1.1.0 日本語リファレンス
   → セレクトメニュー - jQuery Mobile 1.1.0 日本語リファレンス




このエントリーをはてなブックマークに追加




管理人だけが読めるコメントにする(返信はしません)
【お知らせ】
  • コメントは承認制です。反映に時間がかかります。
  • スパムコメント防止のため一部ホストを規制中です。
  • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
  • 記事に直接関係ない個人のトラブルにはお答えできません。
  • Android は使用経験がないので質問を頂いても答えられません。
  • その他詳細はこちら


ハマっていたので本当に役に立ちました!
kateinoigakukun | 2015/08/31/Mon [EDIT]
お役に立ててよかったです!
うみの さち | 2015/09/03/Thu [EDIT]



記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ