まあ、よくあるプログラムですが。
なんかに同意する意味でチェックボックスをチェックすることで、次のページに進むためのボタンが活性化し押せるようになる・・・って画面、よくありますな。あれ。
まあ、全然難しい話ではなくて、
JavaScript<script type="text/javascript"><!--function checkValue(fname, cbox, target){var check = document.forms[fname].elements[cbox];var btn = document.forms[fname].elements[target];if (check.checked) {btn.removeAttribute('disabled');}else {btn.setAttribute('disabled', 'disabled');}}//--></script>Form<form id="form1"><input id="check" type="checkbox" onclick="checkValue('form1', 'check', 'btn')"> あれを更新してもいい？<br><br><input id="btn" type="button" value="あれを更新するよ" disabled="disabled"></form>
て感じで OK。
最初は disabled 属性に disabled を指定しているので「非活性」の状態で、同意のチェックをしたら、disabled 属性を空にして「活性化」すると。
ただ、現在使っているフレームワークは JavaServer Faces (JSF) で、input タグは h:commandButton タグで設定するんだけど、なんか、disabled 属性が無視されるんですけど？(^^;
<h:commandButton type="submit" id="btn" value="次へ" 省略 disabled="disabled" />
みたいに設定してても、実際吐き出された input タグには disabled 属性が含まれていないという・・・
JSF はほとんど経験ないのでわかんないんだけど、でも、ググってみると h:commandButton タグに disabled 属性は存在するみたい。うーん、謎。なんか環境がカスタマイズされているのかね？今回、その辺の環境がわかる人が近くにいないので、別のやり方で対応。
まあ、やり方は色々あるわけで。
JavaScript<script type="text/javascript"><!--function init(){var btn = document.forms['form1'].elements['btn'];btn.disabled = true;}function checkValue(fname, cbox, target){var check = document.forms[fname].elements[cbox];var btn = document.forms[fname].elements[target];if (check.checked) {btn.disabled = false;}else {btn.disabled = true;}}//--></script>Form<form id="form1"><input id="initFlg" type="hidden" value="1"><input id="check" type="checkbox" onclick="checkValue('form1', 'check', 'btn')"> あれを更新してもいい？<br><br><input id="btn" type="button" value="あれを更新するよ"></form>
として、<body onload="init()"> で画面が表示された最初に1回だけ init 処理を実行する。
その処理で、ボタンを非活性にしているのであります。
もともと、desabled="disabled" という記述が input タグになければ setAttribute などのメソッドは使えないので、input タグの disabled というプロパティを操作している。true（非活性）か false（活性）をセットしているのだね。
最初の案より、init 処理が増えているだけ、ちょっと面倒かな。
いやあ、しかし、h:commandButton タグに disabled 属性が無視されるのは何でなんだろう。
識者の方、ご教授いただければ幸いです。
コメントする