FORMの要素を無効化(disabled)にするには、disabled属性を追加します。また有効化するにはdisabled属性を削除します。
で、これが面倒くさいので、そういう機能をjQueryに追加します。
jQueryのエレメントに機能を追加するには $.fn.extend を使うそうなので、サンプルの通りに実装します。
コード:
jquery-oreextend.js
// フォームの要素を無効化したり有効化したりする機能追加 $.fn.extend({ disabled:function(value){ // 引数がないとき、disabledのときtrueを返す if(value===undefined) return $(this).attr("disabled")!==undefined; if(value){ // 引数がtrueのとき、無効化する $(this).attr("disabled","disabled"); }else{ // 引数がfalseのとき、有効化する $(this).removeAttr("disabled"); } } });
使い方:
サンプル:
hoge.html
<html> <head> <meta http-equiv="content-script-type" content="text/javascript"> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery-oreextend.js"></script> <script type="text/javascript"> // テストコード function changehoge(value) { $("#hoge").disabled(value); // チェックされたら無効化する $("#hoge").val($("#hoge").disabled()); // 今の無効化状態をhogeに書く } </script> </head> <body> このチェックを押すと、disabledにしたりする <form> <input type=checkbox onclick="this.blur();this.focus();" onchange="changehoge(this.checked)"> <input id=hoge> </form> </body> </html>
IE以外なら、disabled属性の値をfalseにすることでdisabled属性を無効にできる(disabled属性があるままで要素を有効化できる)けど、そんなへそ曲がりな実装は無視する。