「同意する」のラジオボタンを選択（クリック）すると、送信ボタンを有効化する。「同意しない」のラジオボタンを選択（クリック）すると、送信ボタンを無効化する。
つまり、「同意する」を選択しなければ、送信ボタンをクリックできない。
実装例
実装例の動作について
- 「同意する」のラジオボタンを選択すると、送信ボタンを有効化する。
- 「同意しない」のラジオボタンを選択すると、送信ボタンを無効化する。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function changeDisabled() {
if ( document.Form1["accept"][1].checked ) {
document . Form1["send"] . disabled = false;
} else {
document . Form1["send"] . disabled = true;
}
}
window.onload = changeDisabled;
// -->
</script>
<!--
function changeDisabled() {
if ( document.Form1["accept"][1].checked ) {
document . Form1["send"] . disabled = false;
} else {
document . Form1["send"] . disabled = true;
}
}
window.onload = changeDisabled;
// -->
</script>
HTML
<form name="Form1" method="post" action="#">
<input type="radio" name="accept" value="同意しない" id="radio-no" checked onClick="changeDisabled()"><label for="radio-no"> 同意しない</label>
<input type="radio" name="accept" value="同意する" id="radio-accept" onClick="changeDisabled()"><label for="radio-accept"> 同意する</label>
<p style="display:inline;"><input type="submit" name="send" value="送信" disabled></p>
</form>
<input type="radio" name="accept" value="同意しない" id="radio-no" checked onClick="changeDisabled()"><label for="radio-no"> 同意しない</label>
<input type="radio" name="accept" value="同意する" id="radio-accept" onClick="changeDisabled()"><label for="radio-accept"> 同意する</label>
<p style="display:inline;"><input type="submit" name="send" value="送信" disabled></p>
</form>
解説
JavaScript
<script type="text/javascript">
<!--
function changeDisabled() {
if ( document.Form1["accept"][1].checked ) { // 「同意する」のラジオボタンを選択したとき
document . Form1["send"] . disabled = false; // 「送信」ボタンを有効化
} else { // 「同意しない」のラジオボタンを選択したとき
document . Form1["send"] . disabled = true; // 「送信」ボタンを無効化
}
}
window.onload = changeDisabled; // ページを表示したとき、changeDisabled() を呼び出す
// -->
</script>
<!--
function changeDisabled() {
if ( document.Form1["accept"][1].checked ) { // 「同意する」のラジオボタンを選択したとき
document . Form1["send"] . disabled = false; // 「送信」ボタンを有効化
} else { // 「同意しない」のラジオボタンを選択したとき
document . Form1["send"] . disabled = true; // 「送信」ボタンを無効化
}
}
window.onload = changeDisabled; // ページを表示したとき、changeDisabled() を呼び出す
// -->
</script>
HTML
onClick=""
input 要素内のイベント属性の onClick="" で指定した通り、「同意する」もしくは「同意しない」のラジオボタンを選択（クリック）したとき、JavaScript の changeDisabled() を呼び出す。