今なら家電が全品9%OFF!

お世話になります。

ラジオボタンが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">


よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

>このような使い方はOKでしょうか?



結論からいえばNGです

disabledされている時点でサーバーにデータは飛びませんので設定してあっても
なんの意味もありません。

レイアウト上の問題でdisabledされているラジオボタンを残すのは問題外ですね
百害あって一理なし、ユーザーは混乱こそすれなんのメリットもありません
ユーザビリティについて一度真剣に学習したほうがよろしいかと

ただし、それでもどうしてもその書き方にこだわりがあるならとめませんが
相当ユーザーにバカにされる覚悟が必要です
    • good
    • 0
この回答へのお礼

アドバイス、ありがとうございます。

サーバにデータに飛ばないのは承知といいますか、飛ばなくていいので、
ホントに見た目だけラジオボタンでいいのです。

構文的に間違っていないか、Another HTML-lint で checkしましたがエラーにはなりませんでした。

エンドユーザも限られた方だけで、そういう仕様で(チェックできなければ見えていても良い)OKといわれています。

構文的に、誤解釈や誤操作とならなければ
いいのですが。。。

お礼日時:2012/08/20 14:47

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qチェックボックスの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以外のブラウザでも動作できると大変助かります.よろしくお願い致します.

下記の動作をする 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 ty...続きを読む

Aベストアンサー

litton101 さん、こんにちは。

さて litton101 さんのスクリプト、以下のように修正させていただきました。お試しあれ。

<html>
<head>
<script type="text/javascript">
function checkfunc() {

for(i=0; i<5; i++) {

document.myform.rdo1[i].disabled = !(document.myform.yesno.checked);

}

}
</script>
</head>
<body onLoad="checkfunc();">
<form name="myform">
<input type="checkbox" name="yesno" value="1" onClick="checkfunc();">チェックボックス
<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>

litton101 さん、こんにちは。

さて litton101 さんのスクリプト、以下のように修正させていただきました。お試しあれ。

<html>
<head>
<script type="text/javascript">
function checkfunc() {

for(i=0; i<5; i++) {

document.myform.rdo1[i].disabled = !(document.myform.yesno.checked);

}

}
</script>
</head>
<body onLoad="checkfunc();">
<form name="myform">
<input type="checkbox" name="yesno" value="1" onClick="checkfunc();">チェックボックス
<input type="radio" ...続きを読む

Qボタンを動的に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のところに入れればいいか解りません。
よろしくお願い致します。

お世話になります。

ある画面に複数ボタンがあって
押されたボタンを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
>
...続きを読む

Aベストアンサー

そういう場合は名前じゃなくて、thisというオブジェクトを渡します。

<script language=javascript>
function hogehoge(btn){
btn.disabled=true;
}
</script>
<form name="form">
<input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge(this)">
<input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge(this)">
<input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge(this)">
</form>

Qdiv要素内の全input要素をdisable

Javascriptで、あるdiv要素内のチェックボックスやテキストフィールドなどのinput要素を
すべてdisableにしたいです。
以下でうまくいきません。どなたかお知恵を頂けないでしょうか?
よろしくお願い致します。
var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var input_tag in input_tags)
{
input_tag.disabled = true;
}

Aベストアンサー

var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var i=0;i<input_tags.length;i++){
input_tags[i].disabled = true;
}

Qradioボタンの値の取得の仕方?

こんにちは,よろしくお願いします。
ラジオボタンの値でテキストフィールドのような要素をdisabledにしようと考えています。
そこで
<input name="AAA" type="radio" id="AAA_0" value="0" checked="checked" onclick="xxx()"/>選択肢A
<input name="AAA" type="radio" id="AAA_1" value="1" onclick="xxx()"/>選択肢B
とし,javascriptのxxx functionの中では,

if(document.getElementById("AAA").value == 0){
document.getElementById("BBB").disabled = true;
}else if(document.getElementById("AAA").value == 1){
document.getElementById("BBB").disabled = false;
}
}
としてみたところ,いつも document.getElementById("AAA").value の値が0のままでいくら選択肢Bをクリックしても切り替わりません。
一体何が悪いのでしょうか。教えてください。よろしくお願い申し上げます。

こんにちは,よろしくお願いします。
ラジオボタンの値でテキストフィールドのような要素をdisabledにしようと考えています。
そこで
<input name="AAA" type="radio" id="AAA_0" value="0" checked="checked" onclick="xxx()"/>選択肢A
<input name="AAA" type="radio" id="AAA_1" value="1" onclick="xxx()"/>選択肢B
とし,javascriptのxxx functionの中では,

if(document.getElementById("AAA").value == 0){
document.getElementById("BBB").disabled = true;
}else if(document.getElementByI...続きを読む

Aベストアンサー

> document.getElementById("AAA").value

"AAA"となっているのはname属性ですけど...。

> ラジオボタンの値でテキストフィールドのような要素をdisabledに
> しようと考えています。

テキストフィールドのような要素とは?

> document.getElementById("BBB")

"BBB"というid属性がついているフォームがあるのでしょうか。
こんな感じで書いてみました。
試していないので動作するかどうかは分かりません。

var radio = document.getElementsByName('AAA');
for(var i = 0; i < radio.length; i++) {
if(radio[i].checked) {
document.getElementById('BBB').disabled = i \ 2 ? false : true;
}
}

Q