jQueryでのdisabledの扱い方とは？disabledの扱い方を紹介

Javascript
jQuery
プログラミング言語

公開日時: 2021-01-15 　更新日時: 2022-06-09

この記事でわかること

システム エンジニア: disabledの扱い方がよく理解できないので教えてください。

プロジェクト マネージャー: まずdisabledの特性について理解していきましょう。

jQueryでのdisabledの扱い方とは？

今回は、jQueryでのdisabledの扱い方について説明します。

disabledとは、無効状態を表現するものです。ボタンやテキストボックス、セレクトボックスなどを無効にしたり、無効状態を解除したりできます。また、無効状態を取得し、判定文に使用することもできます。

jQueryでのdisabledの扱い方に興味のある方はぜひご覧ください。

設定

jQueryでdisabledを設定する（無効にする）には、propメソッドを使用します。

HTMLを以下に記載します。

<input id="test" type="text">
<select id="area">
  <option value="0">Select...</option>
  <option value="1">item1</option>
  <option value="2">item2</option>
  <option value="3">item3</option>
</select>
<button>ボタン</button>

<option value="0">Select...</option>

</select>

jQueryは以下のように記述します。

$(function() {
  // inputのdisabled
  $('input').prop('disabled', true);
  // selectのdisabled
  $('select').prop('disabled', true);
  // buttonのdisabled
  $('button').prop('disabled', true);
});

$(function() {

// inputのdisabled

$('input').prop('disabled', true);

// selectのdisabled

$('select').prop('disabled', true);

// buttonのdisabled

$('button').prop('disabled', true);

});

実行すると、テキストボックス、セレクトボックス、ボタンが無効になります。
propメソッドでdisabledが設定されていることが分かります。

解除

jQueryでdisabledを解除するには、同じくpropメソッドを使用します。HTMLを以下に記載します。

<input id="test" type="text" disabled>
<select id="area" disabled>
  <option value="0">Select...</option>
  <option value="1">item1</option>
  <option value="2">item2</option>
  <option value="3">item3</option>
</select>
<button disabled>ボタン</button>

<option value="0">Select...</option>

</select>

jQueryは以下のように記述します。

$(function() {
  // inputのdisabled無効
  $('input').prop('disabled', false);
  // selectのdisabled無効
  $('select').prop('disabled', false);
  // buttonのdisabled無効
  $('button').prop('disabled', false);
});

$(function() {

// inputのdisabled無効

$('input').prop('disabled', false);

// selectのdisabled無効

$('select').prop('disabled', false);

// buttonのdisabled無効

$('button').prop('disabled', false);

});

実行すると、テキストボックス、セレクトボックス、ボタンが有効になります。
propメソッドでdisabledが解除されていることが分かります。

判定

jQueryでdisabled状態を判定するには、同じくpropメソッドを使用します。

HTMLを以下に記載します。

<input id="test" type="text" disabled>
<select id="area" disabled>
  <option value="0">Select...</option>
  <option value="1">item1</option>
  <option value="2">item2</option>
  <option value="3">item3</option>
</select>
<button disabled>ボタン</button>

<p id="p01"></p>
<p id="p02"></p>
<p id="p03"></p>

<option value="0">Select...</option>

</select>

jQueryは以下のように記述します。

$(function() {
  // disabled状態の取得(prop)
  let result1 = $('input').prop('disabled');
  let result2 = $('select').prop('disabled');
  let result3 = $('button').prop('disabled');

  // 結果出力
  $('#p01').text(result1);
  $('#p02').text(result2);
  $('#p03').text(result3);
});

$(function() {

// disabled状態の取得(prop)

let result1 = $('input').prop('disabled');

let result2 = $('select').prop('disabled');

let result3 = $('button').prop('disabled');

// 結果出力

$('#p01').text(result1);

$('#p02').text(result2);

$('#p03').text(result3);

});

実行すると、disabled状態が取得され、p要素に表示されていることが分かります。

一括操作

jQueryでdisabled状態を一括操作する方法を紹介します。

HTMLを以下に記載します。

<div id="target">
  <input id="test" type="text">
  <select id="area">
    <option value="0">Select...</option>
    <option value="1">item1</option>
    <option value="2">item2</option>
    <option value="3">item3</option>
  </select>
  <button>ボタン</button>
</div>

<option value="0">Select...</option>

</select>

</div>

jQueryは以下のように記述します。

$(function() {
  // 一括でdisabledにする
  $("#target").find('input,select,button').prop('disabled', true);
});

$(function() {

// 一括でdisabledにする

$("#target").find('input,select,button').prop('disabled', true);

});

id指定でfindし、複数要素指定でdisabledに変更しています。
実行すると、テキストボックス、セレクトボックス、ボタンが無効になることが分かります。

イベントで操作

disabled状態をイベント操作する方法を紹介します。
HTMLを以下に記載します。

<input id="check" type="checkbox">disabled切替え<br />
<button disabled>ボタン</button>

1 2	<input id="check" type="checkbox">disabled切替え<br /> <button disabled>ボタン</button>

jQueryは以下のように記述します。

$(function() {
  // checkboxの変更時
  $('#check').change(function() {

    // disabled状態の取得
    let result = $('button').prop('disabled');

    // disabled状態の反転
    if (result) {
      $('button').prop('disabled', false);
    } else {
      $('button').prop('disabled', true);
    }
  })
});

$(function() {

// checkboxの変更時

$('#check').change(function() {

// disabled状態の取得

let result = $('button').prop('disabled');

// disabled状態の反転

if (result) {

$('button').prop('disabled', false);

} else {

$('button').prop('disabled', true);

}

})

});

実行すると、チェックボックスのチェックON/OFFを切替えることで、disabled状態が反転することが分かります。

システム エンジニア: なるほど。HTML要素の属性に付与すると無効化できる属性ということですね。

プロジェクト マネージャー: 無効化を解除したり、状態を判定できるメソッドもあります。

まとめ

いかがでしたでしょうか。jQueryでのdisabledの扱い方について説明しました。

ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQueryでのdisabledの扱い方とは？disabledの扱い方を紹介

jQueryでのdisabledの扱い方とは？

設定

解除

判定

一括操作

イベントで操作

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

jQueryでのdisabledの扱い方とは？disabledの扱い方を紹介

jQueryでのdisabledの扱い方とは？

設定

解除

判定

一括操作

イベントで操作

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryの使い方とは？jQueryを正しく使いこなしてWebページ制作をしよう！

jQueryのfadeInの使い方は？fadeInというメソッドをマスターしよう！

ジェイクエリーとは？メリット・デメリット10選・導入する方法や記述方法を紹介

jQueryのon loadとは？jQueryのon loadは適切に使おう！

getElementByIdの使い方｜基本的な使い方からjQueryでの記述方法まで紹介！