• 締切済み

ラジオボタンでdisabledとchecked

お世話になります。 ラジオボタンが3つ有り、それぞれチェックする種類によって 表示内容を変更している処理があります。 今回、そこをカスタマイズすることになり、表示するのは1種類になりました。 環境ファイルの設定で、1種類か3種類かの表示を 変更できるようにしなければなりませんが。 つまり、ラジオボタンが不要になったのですが、 そのラジオボタンを参照している箇所が数箇所あるので それらを削除するのでなく、レイアウトも崩れてしまうので ラジオボタンはそのままで、表示する種類のラジオボタンを checked し、 全部のボタンを disabled しました。 （ラジオボタン横の文字はフォントの色をグレーにしました） 問題なく、動いているのですが このような使い方はOKでしょうか？ 　こんな感じにしました 　　　↓ <input type="radio" name="who" value="0" checked disabled><font class="gray">全員</font> <input type="radio" name="who" value="1" disabled><font class="gray">男性</font> <input type="radio" name="who" value="2" disabled><font class="gray">女性</font> 　<input type="button" value="表示" name="hyouji" id="hyouji"> よろしくお願いします。

  • jg1wjz
  • お礼率91% (148/162)

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

＞このような使い方はOKでしょうか？ 結論からいえばNGです disabledされている時点でサーバーにデータは飛びませんので設定してあっても なんの意味もありません。 レイアウト上の問題でdisabledされているラジオボタンを残すのは問題外ですね 百害あって一理なし、ユーザーは混乱こそすれなんのメリットもありません ユーザビリティについて一度真剣に学習したほうがよろしいかと ただし、それでもどうしてもその書き方にこだわりがあるならとめませんが 相当ユーザーにバカにされる覚悟が必要です

jg1wjz
質問者

お礼

アドバイス、ありがとうございます。 サーバにデータに飛ばないのは承知といいますか、飛ばなくていいので、 ホントに見た目だけラジオボタンでいいのです。 構文的に間違っていないか、Another HTML-lint で checkしましたがエラーにはなりませんでした。 エンドユーザも限られた方だけで、そういう仕様で（チェックできなければ見えていても良い）ＯＫといわれています。 構文的に、誤解釈や誤操作とならなければ いいのですが。。。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Firefoxのdisabledプロパティのバグ？

    複数のラジオボックスがあり、すべてのラジオボタンで 「YES」がチェックされた時にだけ、submitボタンが 有効になるようJavaScriptで制御できればと思ってます。 素人ながら以下のようなJavascriptにしたところ、 IEやSafari、Chromeでは意図した通り動作しましたが、 ただFirefoxのみボタンがdisabledになったまま有効になりませんでした。 解決策がわかる方がいらっしゃればご教授お願いできればと思います。 よろしくお願い致します。 <script type="text/javascript"> <!-- function check() { if (form1.radio1[0].checked && form1.radio2[0].checked && form1.radio3[0].checked) { form1.send.disabled = false; } else { form1.send.disabled = true; } } ; //--> </script> <form name="form1"> <input type="radio" name="radio1" value="1" >YES <input type="radio" name="radio1" value="2">NO <input type="radio" name="radio2" value="1">YES <input type="radio" name="radio2" value="2">NO <input type="radio" name="radio3" value="1" onClick="check()">YES <input type="radio" name="radio3" value="2">NO <input type="button" name="send" value="GO" onclick="location.href='hogehoge.html'" disabled="disabled"> </form>

  • チェックボックスのON/OFFに連動してラジオボタンのdisabledを解除

    下記の動作をする　checkfunc();　の書き方をご教示ください． <html> <head> <script type="text/javascript"> checkfunc() </script> </head> <body> <form name="myform"> <input type="checkbox" name="yesno" value="1">チェックボックス <input type="radio" name="rdo1" value="0">ラジオボタン0 <input type="radio" name="rdo1" value="1">ラジオボタン1 <input type="radio" name="rdo1" value="2">ラジオボタン2 <input type="radio" name="rdo1" value="3">ラジオボタン3 <input type="radio" name="rdo1" value="4">ラジオボタン4 </form> </body> </html> (1) このHTMLのラジオボタン5つは，最初は全てdisabledです． (2) チェックボックスがされたらラジオボタングループが有効になるようにしたいです． (3) 逆に，チェックが外れたらラジオボタンはdisabledに戻ります． (4) このjavascriptは，PHPファイルに組み込みますが．表示時にDBを読み込んでどれに 　チェック/選択されていたかによって，checkboxやradioに「checked」を追記します． 　その場合，enabled/disablesの関係に矛盾がないようにもしたいですが， 　<body>に onload="checkfunc();" と入れればいいでしょうか？ なお，IE以外のブラウザでも動作できると大変助かります．よろしくお願い致します．

  • JavaScript フォームでのラジオボタン制御

    JavaScript初心者です。 <input name="sample1" value="左ラジオボタン" checked="checked" type="radio"> 左ラジオボタン <input name="sample1" value="右ラジオボタン" type="radio">右ラジオボタン 右ラジオボタンをクリックした場合に下記のラジオボタンをクリックできる <input name="sample2" value="1" type="radio">1 <input name="sample2" value="2" type="radio">2 <input name="sample2" value="3" type="radio">3 <input name="sample2" value="4" type="radio">4 上記のように右ラジオボタンにチェックした時だけ1～4のラジオボタンをクリックできるように制御 したいのですがどのように書いて言ったらいいのか困っています。 $(function() { $("[name='sample1']").click(function(){ var num = $("[name='sample1']").index(this); if(num == 1){ $("[name='sample1']").attr("disabled", false); } else { $("[name='sample1']").attr("disabled", true); } }); }); 上記のようにしてみたのですがここからどう下のラジオボタンを操作させるようにしていったらいいのかわかりません。 詳しい方どなたかご教示頂けないでしょうか？ 宜しくお願い致します。

  • クリックしたラジオボタンの行番号を取得したい

    Jqueryを用いてクリックしたラジオボタンの行番号を取得したいのですが、 うまくいきません。 次のようなHTMLで <table border="1" style="font-size:12px;"> <tr> <td>2014年06月01日</td> <td> <label><input type="radio" name="rd1" class="rd" value="0" />A</label> <label><input type="radio" name="rd1" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd1" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月02日</td> <td> <label><input type="radio" name="rd2" class="rd" value="0" />A</label> <label><input type="radio" name="rd2" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd2" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月03日</td> <td> <label><input type="radio" name="rd3" class="rd" value="0" />A</label> <label><input type="radio" name="rd3" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd3" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月04日<td> <td> <label><input type="radio" name="rd4" class="rd" value="0" />A</label> <label><input type="radio" name="rd4" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd4" class="rd" value="7" />C</label> </td> </tr> </table> 下記で選択したラジオボタンの値を取得できるのですが、 行の番号が取れません。 //ラジオボタンを変更 $('.rd').change(function(){ val = $(this).val(); alert("hoge " + val); }); どのようにしたら良いでしょうか？ 宜しくお願いいたします。

  • jQueryで複数のラジオボタンを処理

    jQueryを最近使い始めました。 以下のようなことをしたいのですが、いいやり方が分かりません。 jQueryを使ってページの読み込み後すぐに、ラジオボタンにチェックを入れたいと思っています。 以下のようにすると実際にチェックが入りました。 HTML <input type="radio" name="a" value="1" /> <input type="radio" name="a" value="2" /> jQuery if(!$("input:radio[name=a]:checked").val()){ 　$("input:radio[name=a]:first").attr("checked" , "checked"); } ラジオボタンが複数ある場合、上記のjQueryのnameの値を変えたものを増やしていけば対応できたのですが、ラジオボタンがたくさんある場合、同じようなスクリプトが何行も増えてしまいます。 うまく関数にする方法やその他よい対処法はないでしょうか。 <input type="radio" name="a" value="1" /> <input type="radio" name="a" value="2" /> <input type="radio" name="b" value="1" /> <input type="radio" name="b" value="2" /> <input type="radio" name="c" value="1" /> <input type="radio" name="c" value="2" /> … if(!$("input:radio[name=a]:checked").val()){ 　$("input:radio[name=a]:first").attr("checked" , "checked"); } if(!$("input:radio[name=b]:checked").val()){ 　$("input:radio[name=b]:first").attr("checked" , "checked"); } if(!$("input:radio[name=c]:checked").val()){ 　$("input:radio[name=c]:first").attr("checked" , "checked"); } …

  • ラジオボタン選択で「複数ラジオボタン」をアクティブにするには？

    ■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 （ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効） 用途はアンケートフォームです。 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form2" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、ラジオボタン（カテゴリー1～4）がアクティブになる。 </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">カテゴリー1 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー2 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー3 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー4 </td> </tr> </table> </form>

  • ラジオボタンについて

    ラジオボタンのオブジェクトにcheckedプロパティはあるのでしょうか？ ラジオボタンは基本的に１つしか、値を取らないので 例えば以下の場合、可にチェックがあれば、kokugoの値は「可」 ということでしょうか？ <input type="radio" name ="kokugo" value="優">優 <input type="radio" name ="kokugo" value="良">良 <input type="radio" name ="kokugo" value="可">可 <input type="radio" name ="kokugo" value="不可">不可

  • ラジオボタンについて

    つまらない質問ですがどうか教えてください。 <form name="myform"> ・ ・ ・ <INPUT TYPE="RADIO" NAME="R1" VALUE="1">関連あり</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="2">関連なし</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="3">不明</INPUT> </form> 上記のようなラジオボタンを作ったのですが、 このラジオボタンのチェックされた値を取得するには document.myForm.cGyoumu.value ではできないのでしょうか？ LOOPさせながらdocument.myForm.elements(i).checked で探さないと取得できないのでしょうか？ 同じフォーム内にラジオボタンが複数あるため、 この方法はあまりやりたくありません。 ほかに方法がありましたら、どうか教えてください。

  • ボタンを動的にdisabledさせたいのですが

    お世話になります。 ある画面に複数ボタンがあって 押されたボタンをdisabledにしたいなと思っています。 ただしどのボタンがおされても同じ関数に飛んでほしいのですが いまいち解決できません。 <form name="form"> <input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()"> <input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()"> <input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()"> </form > とあった場合 function hogehoge(){ document.form.ボタンの名前.disabled=true; } としたいのですが 名前の部分は動的に変えることは可能なのでしょうか？ 普通に document.form.syori1.disabled=true; と書けば簡単なのですが、ボタンの数が決まっていないためボタン名を指定して書くことはできません。 ボタン名は onClick="javascript:hogehoge(document.form.ボタンの名前.name)" で、送ることができるのは確認したのですが hogehoge(ボタンの名前) の方でどうやってdisabledのところに入れればいいか解りません。 よろしくお願い致します。

  • ラジオボタンについて

    こんにちは。ラジオボタンについて質問させてください。 <input type="radio" name="area" value="all" onClick="area.value = 'all'" checked>ALL<br> <input type="radio" name="area" value="a" onClick="area.value = 'a'">A<br> <input type="radio" name="area" value="b" onClick="area.value = 'b'">B<br> というHTMLを記述しました。 画面が表示された後にラジオボタンをチェックして実行（別個作成）すると うまく動作するのですが、チェックボタンをチェックしずに （デフォルトの'ALL'選択のまま）実行するとうまくいきません。 どのようにすればうまく動作するのでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する