Web開発者やWebデザイナーには、アニメーションやエフェクトを駆使した華やかなWebサイトやレスポンシブサイトの構築、大量の情報を効率よく見せるためのインタラクティブなナビゲーションを持つWebアプリなど、多様な機能や役割をもつメディアを作成できる能力が求められています。

「jQuery」は、アニメーションやエラーチェック機能などを作成するためによく使われる「JavaScript」のライブラリです。

 

主な使い道として、以下のようなものがあります。

• スマートフォンサイトのメニューの開閉
• 画像のスライドショーやギャラリー
• ボタンをクリックした時のアニメーション
• ユーザー入力フォームのエラーチェック

 

この他にも多種多様な使い方がありますが、今回はjQueryの中でも使用頻度の高い「disabled」属性について解説します。

 

【基礎知識】jQueryとはなにか？

通常、動きのあるWeb部品を作成するためには、JavaScriptでコードを記述します。

JavaScriptは、簡単に説明すると「HTMLとCSSを操作するためのプログラミング言語」のことを指します。

 

しかし、JavaScriptを使用して複雑な動きをさせようとすると、コードが長く複雑になりがちです。

そんなJavaScriptのコードを効率的に使用するために、複数のプログラムをまとめたライブラリが「jQuery」です。

JavaScriptでは数十行に渡る複雑な処理も、jQueryを使用すれば数行で記述することができます。

 

また、サーバーにjQueryファイルを読み込ませて、HTMLに実行文を追加するだけで使用できる「jQueryプラグイン」は数多く配布されています。

しかし、開発の現場などでは、配布されているプラグインやサンプルコードだけでは目的のものを作成できないことも多いです。

使いたい目的によってカスタマイズするには、jQueryの記述方法を覚える必要があります。

とくにWeb業界で開発を行うエンジニアであれば、基礎から学んでおいた方がよいでしょう。

まずは、jQueryに関わる基本的な用語を説明します。

 

タグとは

タグとは「<」と「>」の記号で囲まれた半角の英数字のことで、Webページはこのタグを使って作られています。

開始タグと終了タグで文字列を囲むのがルールで、終了タグにはタグ名の前に「/（スラッシュ）」を付けます。

 

たとえばページのタイトルを指定する場合は、

のように記述します。

改行のときに記述する<br>タグのように、終了タグがないものもあります。

 

属性とは

属性とは、そのタグを構成しているパーツのことです。

 

たとえば

というタグの場合、「href 」と「target」が属性となり、イコール(=)で指定した「xxx」や「_blank」が値となります。

タグに属性をつけることで、より具体的な指示を付加することができます。

この場合でいうと、<a>というaタグで、「href」属性の値がリンク先のURLを指定し、「target」属性の値がリンク先のウインドウ（「_brank」はブラウザで新しいウインドウを開いて表示する）という意味です。

 

セレクタとは

セレクタとは、CSSやjQueryで操作するHTMLの要素を指定する記述です。

たとえば、pタグ（「Paragraph」の略。文章のひとかたまりを表す）のセレクタは、

のように記述します。

 

メソッドとは

メソッドとは、セレクタの操作や値の取得を行う式のことです。

 

このような形で記述します。

メソッドの後には「()」をつけます。

引数がある場合は、このカッコの中に引数を記述します。

 

とくに関数として使うことが多く、たとえば「on()」メソッドを使う時は以下のように記述します。

この場合は、「target」というid名を付けたセレクタをクリックした時に「処理内容」を実行する関数になります。

 

jQueryでのCSS操作

jQueryでよく使われる例として、CSSの操作があります。

このような形で記述することで、CSSの値を取得したり書き換えたりすることが可能です。

 

たとえば、以下のコードでは、すべてのaタグの文字色を「赤」にします。

 

disabled属性の意味

「disabled」は、指定したHTML要素を無効化できる属性です。

有効･無効の状態を持つHTML要素のひとつに、フォーム要素があります。

フォーム要素の主な部品であるテキストボックスや選択リスト、ボタンなどは通常、ユーザーが入力・選択できる要素ですが、disabled属性を付与すると薄い灰色で表示され、ユーザーからの操作を一切受け付けなくなります。

たとえば、ユーザー入力フォームなどで、「必須項目を入力するまでボタンを押せないようにする」などの場合に、ボタンをdisabled状態にしてボタンを押せないようにすることが可能です。

 

disabled属性の使用方法

「disabled」は一般的に、HTMLのタグ内に属性として記述します。

それでは、具体的な使用方法について解説します。

 

ボタンの有効化・無効化

button要素にdisabled属性を設定すると、ボタンの有効化・無効化の処理が可能です。

たとえば、<button>ボタン</button>のようなbuttonタグを押せないようにしたいときには、以下のように記述します。

 

 

この「disabled」を消すと、ボタンが押せるようになります。

 

 

これを切り替えることで、ボタンの有効化・無効化を操作することができます。

 

しかし、HTMLを書き換える必要があるので、これだけでは実用には向きません。

「ユーザーがテキストを入力したらボタンを押せるようにする」など、条件に合わせてHTMLの内容を書き換えるには、jQueryの制御文が必要になります。

 

「prop()」を使ったdisabledの制御

jQueryの関数を使うと、if文などの制御文が使えるので、タイミングを指定してdisabledの切り替えを制御することができます。

たとえば「prop()」メソッドを使うと、「button.prop( ‘disabled’, true)」でボタンは無効になり、「button.prop( ‘disabled’, false)」でボタンは有効になります。

 

「チェックボックスにチェックが入ったらボタンを押せるようにする」という場合のサンプルコードは、以下のとおりです。

この場合、ボタンの属性は「disabled」にしておきます。

 

 

「enabled」属性でHTML要素を有効化

「disabled」の対になる属性に、「enabled」があります。

「enabled」はHTML要素を有効化する属性で、「is()」メソッドでは返す値の「true」と「false」が逆になります。

「disabled」と「enabled」は対義語として併せて覚えておくとよいでしょう。

 

「attr()」は使ってはいけない？

「prop()」メソッドと似た働きをするメソッドに、「attr()」があります。

どちらも、「指定した属性の値を取得する」メソッドですが、厳密には取得する値が異なります。

「attr()」は「属性における値」を取得し、「prop()」は「プロパティの真偽」を取得します。

 

チェックボックスにチェックが入っているかの判定をするコードを例として、返す値の違いを説明します。

【 チェックが入っている場合 】

「prop()」では「true」を返します。

「attr()」では「checked」を返します。

 

【 チェックが入っていない場合 】

「prop()」では「false」を返します。

「attr()」では「undefind」を返します。

 

この場合、「attr()」では「checked」という属性を取得できず、「undefind」という値を返してしまいます。

予想外の値が返されると、エラーで動かなくなってしまうこともあります。

そのため、チェックボックスにチェックが入っているかの判定などには、「true」か「false」で値を返す「prop()」メソッドが適切です。

 

トラブル回避のためにも正しいメソッドを使用しよう

jQueryの中でも、とくに知っておきたい「disabled」属性の意味と、具体的な使い方を解説しました。

曖昧な理解のまま使っていると、予期せぬトラブルを発生させかねません。

属性の意味と、適切なメソッドを理解して使用することが大切です。

jQueryの情報は、インターネットや書籍でも簡単に入手できるので、学習しながらプログラミングを行いましょう。