セレクトの内容に応じてラジオボタンを自動選択する方法

質問

<script type="text/javascript">
function selectChange(){
var selectedNum = document.form1.Q1.selectedIndex;
if(selectedNum == 0 | selectedNum == 1) {
document.formGeneratorForm1.Q2[0].disabled=false;
document.formGeneratorForm1.Q2[1].disabled=false;
}else{
document.formGeneratorForm1.Q2[0].disabled=true;
document.formGeneratorForm1.Q2[1].disabled=true;
}
}
</script>

<select name="Q1" onchange="selectChange()">
<option value="0" selected >AAA</option>
<option value="1" >BBB</option>
<option value="2" >CCC</option>
</select>
<input type="radio" name="Q2" value="0" />000
<input type="radio" name="Q2" value="1"　checked/>111

上記のソースでQ1でCCCを選択した時に、Q2で000を選択していたとしても111に自動的にチェックを入れる方法をご教授下さい。よろしくお願い致します。

回答No.1

toyota_sera_1990 · ベストアンサー

desabledが入ってるということは、CCCをQ1で選択すると、Q2では強制的に111が選択されしかも変更できなくする、と考えていいのでしょうか。

どこかからコピーしてきたスクリプトのようで、不具合が多々見られますが、こんな感じでしょうか。

スクリプト部分
<script type="text/javascript">
function selectChange(){
var selectedNum = document.form1.Q1.selectedIndex;
if(selectedNum == 0 | selectedNum == 1) {
document.form1.Q2[0].disabled=false;
document.form1.Q2[1].disabled=false;
}else{
document.form1.Q2[1].checked=true;
document.form1.Q2[0].disabled=true;
document.form1.Q2[1].disabled=true;
}
}
</script>

フォーム部分
<form name="form1" action="****.cgi">
<select name="Q1" onchange="selectChange()">
<option value="0" selected >AAA</option>
<option value="1" >BBB</option>
<option value="2" >CCC</option>
</select>
<input type="radio" name="Q2" value="0">000
<input type="radio" name="Q2" value="1" checked>111
</form>

意図したような動きをさせたいのであれば、Q1とQ2は置く位置が逆のような気もしますが。それとformタグにname属性(上の例ではform1)をつけるのを忘れないで下さい。

お礼

仰るとおり、強制的に変更し選択もできなくすることを望んでいました。問題も解決できました。ありがとうございました。

回答No.3

Blaise

チェックを入れるなら、disabledじゃなくて、checkedで
しょう。その他改善点
・<form>タグを入れ、NAMEを統一する
・/>をやめて、>にする。checked/>は最悪。
の２点を加えれば、お望みのものになるでしょう。

あと、細かいことをいえば、イベントがonchangeですか
ら、optionの最初はタイトルか何かがいいですね。

お礼

ありがとうございました。
ご指摘の点勉強になりました。

回答No.2

BLUEPIXY

<script type="text/javascript">
function selectChange(){
var selectedNum = document.form1.Q1.selectedIndex;
if(selectedNum == 0 | selectedNum == 1) {
document.formGeneratorForm1.Q2[0].disabled=false;
document.formGeneratorForm1.Q2[1].disabled=false;
}else{
document.formGeneratorForm1.Q2[0].disabled=true;
document.formGeneratorForm1.Q2[1].disabled=true;
}
if(document.form1.Q1.value=="2"){
document.formGeneratorForm1.Q2[1].checked=true;
}
}
</script>
<form name="form1">
<select name="Q1" onchange="selectChange()">
<option value="0" selected >AAA</option>
<option value="1" >BBB</option>
<option value="2" >CCC</option>
</select>
</form>
<form name="formGeneratorForm1">
<input type="radio" name="Q2" value="0" />000
<input type="radio" name="Q2" value="1" checked/>111
</form>

お礼

ありがとうございました。
問題を解決することができました。