【jQuery編】 disabled、visibleの判定について

disabledの判定方法

jQueryはある要素がdisabledかどうかを判定する場合、皆さんのご存じの通り下記の2つ方法が提供されています。

• is(':disabled')
• prop('disabled')

ネット上にいろいろな情報を探しまして、主に下記の二つ結論になっています。

1. disabled属性の状態を設定するにはprop()メソッドを利用する。
2. disabled属性の状態を取得して判定するにはprop()若しくはis()メソッドを利用する。

ただし、場合によっては、$('#item').prop('disabled')の判定結果と$('#item').is(':disabled')の判定結果が違うことがあります。

HTML上にアイコンを利用する場合、アイコンを表示・制御をしやすい為、大体<span>を利用して実現する。
この場合は、<span>をその2つの方法で判定結果は下記となります。
$('#item').prop('disabled')　常に true になる
$('#item').is(':disabled')　 常に false になる
※<span> に対して、disabled="disabled"追加しても判定結果が変わらない
※Chromeで検証済み

ここまで辿り着いた皆さんは、この点をぜひご注意ください。
もしすこしお役に立つようになれば、幸いと思います。

visibleの判定方法

is(':disabled')と同じように、表示・非表示の判定方法について、jQueryよりis(':visibled')部品が提供されています。
is(':visibled')について、もう少し深くまで見ましょう。

• jQuery 1.3.2より古いバージョン
  　$(':visible')
  　visibility:hidden または、opacity:0は可視状態とみなされます。

• jQuery 1.3.2以降
  HTMLDocに一定的なスペースを有する要素については、可視状態と見なされます。
  その要素は0より大きい幅と高さを持っています。
  jQueryはその要素のoffsetWidthもしくはoffsetHeightの値は0より大きい場合、$(':visible')はtrueになります。
  　※参照：jQuery( ":visible" )

なぜこういう判定方法に切り替えるかというと、性能面の改善です。
Chromeの場合は、処理時間は10%以下に早くなる。
詳しいレポートは、下記のサイトをご参照ください。
:visible/:hidden

Appendix　※個人感想

【常識を考えず問題本質を掘る】の意識は技術者にとって、とても大切なことと思います。
その意識を持ちながら、技術の世界に楽しんでいきましょう。