【jQuery】attrメソッドについて

青木 (2011年12月15日 13:23)
システムソリューション事業部

みなさん、こんにちは。
システムソリューション部の青木です。

今回はjQueryのattrメソッドについて書きます。
attrメソッドは各タグのattributeを設定するときに使用します。
例えば、classというattributeを設定するときには下記のように記述します。

$("#textbox1").attr("class", "class1");

"textbox1"がテキストボックスの場合、次のようなイメージになります。

【設定前】

【設定後】

attributeの設定はこのようにするのですが、私がミスをしてしまったのは設定のクリアです。
私は、checkedのattributeの設定、クリア処理を下記のように書きました。

// checked設定
$("#textbox1").attr("checked", "checked");

// checkedクリア
$("#textbox1").attr("checked", "");

IE8では設定、クリアともに正常に動作しますが、
Google Chromeや、Firefoxでは正常に動作しません。

jQueryはクロスブラウザ対応されているというイメージが強く、
IE8で正常に動作しているのだから大丈夫だろう、と思っていたことが原因でした。

下記のように書くことにより、Google Chrome、Firefoxでも正常に動作します。

// checked設定
$("#textbox1").attr("checked", "checked");

// checkedクリア
$("#textbox1").removeAttr("checked");

ちなみに、$("#textbox1").attr("checked")でcheckedのattribute値を取得できますが、
IEとGoogle ChromeやFirefoxでは返す値が違いますので、ここにも注意して下さい。

確認が大事だということを改めて感じました。

----------
記事の作成中で気づいた点がありますので、触れておきます。
当初、動作確認にはjQueryのバージョン1.6を使用していました。
しかし、バージョン1.6ですとattrメソッドが思い通りの動きをしないということがありました。
調べていくうちに、バージョン1.6.1でその問題（？）が解消されていることが分かりました。

attrメソッドが思い通りに動作しないという方はバージョンを上げると良いかもしれません。

2011/12/15時点での最新バージョンは1.7.1です。
当記事もバージョン1.7.1で動作確認をしています。

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

【jQuery】attrメソッドについて

システム開発のアイロベックスは、創業23年を迎える
プロフェッショナル集団です。