.NET開発者のためのブログメディア

SE: disabledの扱い方がよく理解できないので教えてください。

PM: まず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状態が反転することが分かります。

SE: なるほど。HTML要素の属性に付与すると無効化できる属性ということですね。

PM: 無効化を解除したり、状態を判定できるメソッドもあります。

まとめ

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

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

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

2020年03月17日
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

2020年03月16日
【.NETが統合】.NET 5の概要と今後のリリース予定

2020年03月05日

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

.NET開発者のためのブログメディア

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

jQueryでのdisabledの扱い方とは？

設定

解除

判定

一括操作

イベントで操作

まとめ

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

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

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

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

ソフトを用いた3DCGアート/東京都千代田区/【WEB面談可】/テレワーク

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