こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ラジオボタンとテキストを同時にグレーアウトさせる

<input type=radio name="1" value = 'A1'">A1<br>
<input type=radio name="1" value = 'A2'">A2<br>
<input type=radio name="1" value = 'A3'">A3<br>
<input type=radio name="1" value = 'A4'">A4<br>
<input type=radio name="1" value = 'A5'">A5<br>

<form>
<input type=radio name="tex" onClick="textform.textin.value = 'B1'">B1<br>
<input type=radio name="tex" onClick="textform.textin.value = 'B2'">B2<br>
<input type=radio name="tex" onClick="textform.textin.value = 'B3'">B3<br>
<input type=radio name="tex" onClick="textform.textin.value = 'B4'">B4<br>
<input type=radio name="tex" onClick="textform.textin.value = 'B5'">B5<br>
</form>

<form id="textform" action="#">
ここに文字が表示されます
<input id="textin" type="text" size="30">
</form>

A1を選択した場合、B2とB4とテキストエリアをグレーアウトさせる
A2を選択した場合、B3とテキストエリアをグレーアウトさせる

この記述の方法がわかりません。
初心者ですので、どなたかご教授おねがいします。

投稿日時 - 2011-02-12 11:40:40

QNo.6516804

すぐに回答ほしいです

質問者が選んだベストアンサー

以下のソースをご参考ください。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function init() {
for (i = 0; i < 5; i++) {
document.all('tex')[i].disabled=false;
}

document.all('textin').disabled=false;
}
</script>
</head>
<body>

<input type=radio name="1" value = 'A1' onclick="init(); document.all('tex')[1].disabled=true; document.all('tex')[3].disabled=true; document.all('textin').disabled=true;">A1<br>
<input type=radio name="1" value = 'A2' onclick="init(); document.all('tex')[2].disabled=true; document.all('textin').disabled=true;">A2<br>
<input type=radio name="1" value = 'A3' onclick="init();">A3<br>
<input type=radio name="1" value = 'A4' onclick="init();">A4<br>
<input type=radio name="1" value = 'A5' onclick="init();">A5<br>

<form>
<input type=radio name="tex" onClick="textform.textin.value = 'B1'">B1<br>
<input type=radio name="tex" onClick="textform.textin.value = 'B2'">B2<br>
<input type=radio name="tex" onClick="textform.textin.value = 'B3'">B3<br>
<input type=radio name="tex" onClick="textform.textin.value = 'B4'">B4<br>
<input type=radio name="tex" onClick="textform.textin.value = 'B5'">B5<br>
</form>

<form id="textform" action="#">
ここに文字が表示されます
<input id="textin" type="text" size="30">
</form>

</body>
</html>

投稿日時 - 2011-02-12 22:17:09

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

少々複雑そうなので、ヒントだけ簡単に書きます。
まず、以下の私の習作を操作してみて下さい。
http://homepage1.nifty.com/tetsuhito/kotaerupage1.html
コードを表示してみると分かることがあると思いますが、
背景色の変更は、ラジオボタンのチェンジイベントに反応しています。
また、同名のラジオボタンのどれが選ばれたかを指定するために、
document.form1.rdoiro[i].checked
と記述しているように、フォーム名とインプットダグ名を決めていなければいけません。
name="1" はエラーになるのではないでしょうか。
また
document.getElementById("divKotae").innerHTML =
"<font size=8 color=&ldquo#9999ff&ldquo><center>" + "ご注文金額は "
+ kotae + " 円です。</center></font>";
との記述で、divKotaeとid名を与えたタグをそっくり書き換えています。
この考え方で"text" と "textin" のタグにid名を与えてjavascripなどで操れるようにします。
そしてラジオボタンが選ばれたときに、目的のタグを書き換えいけばお考えの操作が実現できるでしょう。

投稿日時 - 2011-02-12 17:35:33

あなたにオススメの質問