FormのSubmitボタンの「disabled」を、Checkboxの有無で切り替えたいと考えております。
試しにちょこちょこ作ってみたのですが、何か基本的な部分でつまずいているような気がしております。
ご存知の方おられましたら、コメントお願い致します。
<script Language="JavaScript"><!--
function setBT(cOBJ,fName) {
document.fName.disabled = !cOBJ.checked;
}
// --></script>
<form name="test" method="post" action="index.html">
<input type="checkbox" name="agree" value="同意" onClick="setBT(this,'BTN')" />同意
<input type="image" name="BTN" src="btn.gif" alt="OK" disabled>
</form>
No.1
255
15
50pt
http://q.hatena.ne.jp/1155032562（ダミーURL）
たぶんこんな感じだとは思うのですが。nameにせずidにし、getElementByIdにて取得。一応テストはしてみましたが。
<script Language="JavaScript">
<!--
function setBT(cOBJ,fName) {
document.getElementById(fName).disabled = !cOBJ.checked;
}
// -->
</script>
</head>
<body>
<form name="test" method="post" action="index.html">
<input type="checkbox" name="agree" value="同意" onClick="setBT(this,'BTN')" />同意
<input id="BTN" type="image" src="btn.gif" alt="OK" disabled>
</form>
</body>
No.2
35468
10pt
onClick="setBT(this,'BTN')"
で'BTN'の文字列を渡しているので、
そのままだとBTNオブジェクトにはアクセスできません。
JavaScriptを下記のようにすると、
指定された文字列のオブジェクトにアクセスできます。
61
60
function setBT(cOBJ,fName) {
document.getElementById(fName).disabled = !cOBJ.checked;
}
http://sonic64.com/2003-08-29.html
また、ほかのボタンから利用する可能性がなければ固定でも良いと思います。
function setBT() {
document.all.BTN.disabled = !document.all.agree.checked;
}
No.3
80
20pt
「input type="image"」ではdisabled属性を使用できないようです。（参考：上から10行目あたり）
やはり「input type="submit"」を使ってはどうでしょうか？
それと、JavaScriptも少しおかしかったので直してみました。
-------------------------------------------------
<script Language="JavaScript"><!--
function setBT () { // 引数は不要になったので削除
rs=document.test.BTN.disabled; // ボタンが無効状態になっているかを取得
rs=document.test.BTN.disabled;
// フォーム名↑ ↑要素名
if (rs) document.test.BTN.disabled = false; // 有効なら無効化
else document.test.BTN.disabled = true; // 無効なら有効化
}
// --></script>
<form name="test" method="post" action="index.html">
<input type="checkbox" name="agree" value="同意" onClick="setBT()" />同意
<!-- ↑引数は不要になったため削除 -->
<input type="submit" name="BTN" value="送信" alt="OK" disabled>
<!-- ↑src属性は削除 そしてvalue属性を追加 -->
-------------------------------------------------
これでちゃんと動きます。
このような実装もありなのですね。
勉強になります。
ご回答ありがとうございました。
2
ご回答ありがとうございます。
頂いたサンプルで実装できました。
ありがとうございます