1. パーソルテクノロジースタッフのエンジニア派遣
  2. 【はたラボ】派遣のニュース・仕事情報
  3. IT/Web派遣コラム
  4. 【jQuery入門】disabled属性の意味と使用方法を解説

【jQuery入門】disabled属性の意味と使用方法を解説

IT/Web派遣コラム この記事は約 11 分で読めます。

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ページはこのタグを使って作られています。

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

 

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

<title>タイトル文</title>

のように記述します。

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

 

属性とは

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

 

たとえば

<a href=”xxx” target=”_blank”> リンクする文字列</a>

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

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

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

 

セレクタとは

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

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

$(‘p’)

のように記述します。

 

メソッドとは

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

 

jQuery(セレクタ).メソッド(引数)

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

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

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

 

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

$(“#target”).on(“click”, function(){
 //処理内容
});

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

 

jQueryでのCSS操作

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

$(“セレクタ”).css(“プロパティ” , “値”)

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

 

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

$(“a”).css(“color”,”#f00″);

 

disabled属性意味

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

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

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

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

 

disabled属性の使用方法

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

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

 

ボタンの有効化・無効化

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

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

 

<button disabled>ボタン</button>

 

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

 

<button>ボタン</button>

 

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

 

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

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

 

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

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

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

 

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

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

 

$(function() {

 //チェックボックスにチェックが入ったら

 $(‘input[type=”checkbox”]’).change(function() {

   //ボタンを有効にする

   $(button).prop(‘disabled’, false);

 });

});

 

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

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

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

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

 

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

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

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

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

 

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

$(“:checkbox”).click(function() {

  alert($(this).prop(‘checked’));     

 alert($(this).attr(‘checked’));

});

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

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

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

 

まとめ
  • 「disabled」とは、HTML要素を無効化する属性
  • 「disabled」は、jQueryの「prop()」「is()」メソッドで操作する
  • 「disabled」の操作には「attr()」メソッドは向かない
  • トラブル回避のために、正しい情報を調べてプログラミングを行うことが大切

 

 

\ SNSでシェアしよう! /

【はたラボ】派遣のニュース・仕事情報・業界イロハ|派遣会社・人材派遣求人ならパーソルテクノロジースタッフ |IT・Web・機電の派遣求人ならパーソルテクノロジースタッフのエンジニア派遣の注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

【はたラボ】派遣のニュース・仕事情報・業界イロハ|派遣会社・人材派遣求人ならパーソルテクノロジースタッフ |IT・Web・機電の派遣求人ならパーソルテクノロジースタッフのエンジニア派遣の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

関連記事

  • ITエンジニアなら知っておくべき『MySQL』の脆弱性とセキュリティ対策

  • 派遣社員が失業保険をもらうための2つの条件

  • これがリアルなC#エンジニアの年収相場

  • Siriの起源となった人工知能(AI)最初の「イライザ」とは

  • ヘルプデスクとは?仕事内容や給料、キャリアパスをご紹介します

  • ITやインフラ業界でのサポート役となる「PMO」とは何か?

PAGE TOP