jQueryで「jQuery("input").attr("disabled",true)」と書くのはもはや古い


  • 公開:
  • 更新:
  • 編集:
概要 ▶ jQueryについて調べていると色々情報が目に入ってくるものです。2012年4月7日現在、私はjQueryの1.4.4というバージョンを使用しています。これは「会社のCMSでも現在使用しているから」というところが大きいのですが、jQueryの最新版は1.7.2です。最新版のjQueryは以下のページからダウンロードできます。jQuery: The Write Less, Do More, Java
20120406-jQueryのattrとprop-00

jQueryについて調べていると色々情報が目に入ってくるものです。

2012年4月7日現在、私はjQueryの1.4.4というバージョンを使用しています。
これは「会社のCMSでも現在使用しているから」というところが大きいのですが、jQueryの最新版は1.7.2です。

最新版のjQueryは以下のページからダウンロードできます。


さて、では1.4.4ではなく、さっさと最新版にアップデートすれば良いのでは…と思いますが、1.6あたりで大きな変更があったみたいなのでメモ的に記事に残しておきます。


jQuery 1.6で.attr()と.prop()に役割が分かれた

Firefoxでリロードした時に要素をjQueryの「:eq(n)」で選択しようとしても正しく選択できない」と「《解決編》Re: Firefoxでリロードした時に(略)」で指定したradioボタンを選択状態にさせないようにするdisabledの属性の設定を行いました。

その際、JavaScriptは

jQuery("#form-20120405 dd:eq(1) input").attr("disabled",true);

と書きました。よく見る書き方だと思います。


ここでは「disabled」の属性を「.attr」の命令を使用して設定しています。


これがjQuery 1.6以降では推奨されない書き方になっているとのことです。

今まで .attr()だけで済んでいた処理を、バージョン1.6の更新で .attr()と .prop()に分割しました。
CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com

.attr()はHTMLの属性(attribute)を、 .prop()はJavaScriptのプロパティ(property)を扱うためのメソッドです。
CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com

なんと!

つまり、jQuery 1.6以降は

jQuery("#form-20120405 dd:eq(1) input").prop("disabled",true);

と書きましょう、ということです。


なんだか面倒だな(汗)。


とりあえずよく使うこの手のものは「checked」「selected」「disabled」「readonly」だと思います。全部フォーム関係(input要素)です。
注意したいと思います。(といってもjQuery 1.4.4を使い続ける限り関係はないのですが…)

今後jQueryの最新版を使用する場合…

以下の引用のページはjQuery 1.6.1について書かれているページです。jQuery 1.6の.attr()の変更点などが細かく紹介されています。

一部のプロパティは、過渡期的な措置として.attr()で動くだけである点は注意してください。
jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。 | Ginpen.com

もしjQueryを最新版にする場合には、この「過渡的な措置」が終了しているかどうかを確認して使用する必要があります。


jQueryの最新版は色々バグフィックスや高速化・軽量化も行われているから、常に最新版を使用することが良いという考え方も当然ありますが、こうした変更点にも注意をしながら便利にjQueryを使っていきたいものですね。


それでは。
カテゴリー:

このページをぜひシェアしてください