特定のラジオボタンをクリックしたときだけ、特定のラジオボタンの横のテキスト入力欄を有効化し、テキストを入力できるようにする。特定のラジオボタン以外をクリックしたときは、特定のラジオボタンの横のテキスト入力欄を無効化し、テキストを入力できないようにする。
実装例
実装例の動作について
「その他」のラジオボタンを選択すると、「その他」のラジオボタンの横のテキスト入力欄を有効化し、テキストを入力できるようにする。
「その他」のラジオボタン以外を選択すると、「その他」のラジオボタンの横のテキスト入力欄を無効化し、テキストを入力できないようにするする。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function changeDisabled() {
if ( document.Form1["number"][3].checked ) {
document . Form1["inputNumber"] . disabled = false;
} else {
document . Form1["inputNumber"] . disabled = true;
}
}
window.onload = changeDisabled;
// -->
</script>
<!--
function changeDisabled() {
if ( document.Form1["number"][3].checked ) {
document . Form1["inputNumber"] . disabled = false;
} else {
document . Form1["inputNumber"] . disabled = true;
}
}
window.onload = changeDisabled;
// -->
</script>
HTML
<form name="Form1" method="post" action="#">
<p>パソコン所有台数</p>
<input type="radio" name="number" value="持っていない" id="radio-0" checked onClick="changeDisabled()"><label for="radio-0"> 持っていない</label>
<input type="radio" name="number" value="1台" id="radio-1" onClick="changeDisabled()"><label for="radio-1"> 1台</label>
<input type="radio" name="number" value="2台" id="radio-2" onClick="changeDisabled()"><label for="radio-2"> 2台</label>
<input type="radio" name="number" value="その他" id="radio-other" onClick="changeDisabled()"><label for="radio-other"> その他</label>
<p style="display:inline;"><input type="text" name="inputNumber" size="2">台</p>
</form>
<p>パソコン所有台数</p>
<input type="radio" name="number" value="持っていない" id="radio-0" checked onClick="changeDisabled()"><label for="radio-0"> 持っていない</label>
<input type="radio" name="number" value="1台" id="radio-1" onClick="changeDisabled()"><label for="radio-1"> 1台</label>
<input type="radio" name="number" value="2台" id="radio-2" onClick="changeDisabled()"><label for="radio-2"> 2台</label>
<input type="radio" name="number" value="その他" id="radio-other" onClick="changeDisabled()"><label for="radio-other"> その他</label>
<p style="display:inline;"><input type="text" name="inputNumber" size="2">台</p>
</form>
解説
JavaScript
<script type="text/javascript">
<!--
function changeDisabled() {
if ( document.Form1["number"][3].checked ) { // 「その他」のラジオボタンをクリックしたとき
document . Form1["inputNumber"] . disabled = false; // 「その他」のラジオボタンの横のテキスト入力欄を有効化
} else { // 「その他」のラジオボタン以外をクリックしたとき
document . Form1["inputNumber"] . disabled = true; // 「その他」のラジオボタンの横のテキスト入力欄を無効化
}
}
window.onload = changeDisabled; // ページを表示したとき、changeDisabled() を呼び出す
// -->
</script>
<!--
function changeDisabled() {
if ( document.Form1["number"][3].checked ) { // 「その他」のラジオボタンをクリックしたとき
document . Form1["inputNumber"] . disabled = false; // 「その他」のラジオボタンの横のテキスト入力欄を有効化
} else { // 「その他」のラジオボタン以外をクリックしたとき
document . Form1["inputNumber"] . disabled = true; // 「その他」のラジオボタンの横のテキスト入力欄を無効化
}
}
window.onload = changeDisabled; // ページを表示したとき、changeDisabled() を呼び出す
// -->
</script>
HTML
onClick=""
<input type="radio" name="number" value="その他" id="radio-other" onClick="changeDisabled()"><label for="radio-other"> その他</label>
イベント属性である onClick="" で、「その他」のラジオボタンをクリックしたときに、JavaScript の changeDisabled() を呼び出す。
有効化
<p style="display:inline;"><input type="text" name="inputNumber" size="2">台</p>
「その他」のラジオボタンをクリックしたとき、JavaScript で、この部分のテキスト入力欄を、有効化する。