揮発性のメモ2

http://d.hatena.ne.jp/iww/

jQueryでフォームのdisabledをつけたりはずしたりする機能を追加する


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').disabled()
引数なしのとき disabled属性があればtrue、なければfalseを返す
$('#hoge').disabled(value)
valueがtrueのとき 無効化し、falseのとき有効化する

サンプル:

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属性があるままで要素を有効化できる)けど、そんなへそ曲がりな実装は無視する。