ラジオボタンの選択内容により、テキストボックスをアクティブにしたい

質問

資料請求、訪問予約、来店予約のためのメールフォームを作成しています。そこで、資料請求、訪問予約、来店予約の3つの選択項目のラジオボタングループを作って、

1.訪問予約、来店予約のときは、日時入力用のテキストボックスをアクティブにしたい。

2.資料請求のときは、日時入力用のテキストボックスは非アクティブ（disabled）にしたい

3.初期値は資料請求を選択した状態で、テキストボックスは非アクティブ

このようなものを作りたいと思っています。

html+javascript で作れたらいいなと思っています。

どうかご教授お願いします。

回答No.2

yambejp · ベストアンサー

ベタにかくことこんなかんじ

<meta charset=euc-jp>
<script>
function check(flg){
document.getElementById("nichiji").disabled=flg;
}
</script>
<form>
<p>
<input type="radio" name="hoge" id="hoge1" onClick="check(true)" checked><label for="hoge1">資料請求</label>
<input type="radio" name="hoge" id="hoge2" onClick="check(false)"><label for="hoge2">訪問予約</label>
<input type="radio" name="hoge" id="hoge3" onClick="check(false)"><label for="hoge3">来店予約</label>
</p>
<p>
日時：<input type="text" name="nichiji" id="nichiji" disabled>
</p>
</form>

回答No.1

noname#84373

レスがつかないようなので。

HTMLぐらい書きましょう！
わからないので勝手に解釈しました。
なので長くなってしまいました。
スクリプトのみ掲載です。
<p><input type="text" ～</p>
のようにテキストボックスは、<p>とか<div>で囲ってください

//@cc_on
/*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function () {
var radioName = 'abc'; //inputのradioのタグの名前。radioのvalue値は、訪問予約・来店予約・資料請求と漢字にしてください
var textBoxName = 'def'; //inputのtextboxoのタグの名前。inputタグはブロック要素の内側に属するので、親のCSSをいじりました。
document.getElementsByName(textBoxName)[0].parentNode.style.display = 'none';
document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function (evt) {
var o = evt./*@if (1) srcElement @else@*/ target/*@end@*/;
if (o.tagName=='INPUT' && o.type=='radio' && o.name == radioName)
document.getElementsByName(textBoxName)[0].parentNode.style.display =
o.value=='資料請求' ? 'none': 'block';
}, false);
}, false);

お礼

ありがとうございます！
思い通りのものが出来ました！

補足

_pipi_様、回答ありがとうございました。
それからソースを添付せずに質問し大変失礼しました。

以下が初期状態のソースです。
初期状態では、資料請求を選択した状態で、テキストボックスはdisplay="none"ではなく、disabled="disabled"にした状態にしたいと思っています。そして、訪問もしくは来店を選択した場合にテキストボックスを入力可能状態にしたいと思っています。

2度手間になってしまい、大変申し訳ありませんが、ご回答の方よろしくお願いします。

<table>
<tr>
<th scope="row">選択項目</th>
<td>
<label><input name="abc" type="radio" value="資料請求" checked="checked" />
資料請求</label>
<label><input type="radio" name="abc" value="訪問" />訪問</label>
<label><input type="radio" name="abc" value="来店" />来店</label>
</td>
</tr>
<tr>
<th scope="row">予約日時</th>
<td>
<label><input type="text" name="def" disabled="disabled" /></label>
</td>
</tr>
</table>