選択の有無を制御したい

質問

name="q2"が選択されていなければname="q3"が選択できるようになり
name="q2"が選択されていればname="q3"が選択できないように制御したいのですがどのようにすれば
できるでしょうか？

仮にname="q3"が選択されている状態でname="q2"が選択された場合にはname="q3"の選択値をクリアさせたいです。

サンプルがあるようなurl等の情報でも構いませんので実現できる方法を教えてください。

現在のhtmlは以下の通りです。
<dl>
<dt>検索地域</dt>
<dd>
<label><input type="checkbox" name="q2" value="1" /> 地域を指定しない</label>
<br />
<label><input type="checkbox" name="q3" value="1"> ○○市</label>
<label><input type="checkbox" name="q3" value="2" /> ××市</label>
<label><input type="checkbox" name="q3" value="3" /> △△市</label>
</dd>
</dl>

回答No.1

うぃず（@Wizard_Zero） · ベストアンサー

<script type="text/javascript"><!--

function q2click()
{
var q2value = document.forms.form01.q2.checked;
var q3array = document.forms.form01.q3;

for(i = 0; i < q3array.length; i++)
{
q3array[i].disabled = q2value;
if (q2value) q3array[i].checked = false;
}
}

//--></script>
<form id="form01">
<label><input type="checkbox" name="q2" onclick="q2click();" />地域を指定しない</label><br />
<label><input type="checkbox" name="q3" value="1" /> ○○市</label>
<label><input type="checkbox" name="q3" value="2" /> ××市</label>
<label><input type="checkbox" name="q3" value="3" /> △△市</label>
</form>

こんな感じでいかがですか？
document.forms.form01
のform01の部分はformのidまたはnameに置き換えて下さい。
formにidやnameがない場合は
document.forms.form01
のすべてを
document.forms[0]
と置き換えて下さい。ページに複数のformがある場合は[ ]内の数値を調整してください。

お礼

お返事遅くなり申し訳ございません^^;
おかげさまで上手く動作させることができました！ありがとうございます！