HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Dateのdisabledプロパティとは？使い方とサンプルコードを解説

HTML DOMのInput Dateオブジェクトのdisabledプロパティは、日付入力フィールド（<input type="date">）が有効か無効かを取得・設定するためのプロパティです。このプロパティを使うことで、JavaScriptから動的に日付入力の操作可否を制御できます。

構文

disabledプロパティの構文は以下の通りです。

値を取得する場合

現在の状態をブール値（true / false）として返します。

inputDateObject.disabled

値を設定する場合

booleanValueにtrueまたはfalseを指定して、有効/無効を切り替えます。

inputDateObject.disabled = booleanValue

booleanValueに指定できる値

「booleanValue」には以下のいずれかの値を指定します。

booleanValue説明
true日付入力フィールドが無効（操作不可）であることを示します。
false日付入力フィールドが有効（操作可能）であることを示します。これがデフォルト値です。

サンプルコード

ここでは、Input Dateのdisabledプロパティを使った具体的な例を見てみましょう。初期状態では無効化された日付入力フィールドを用意し、ボタンをクリックすると有効化される仕組みです。

<!DOCTYPE html>
<html>
<head>
<title>Input Date Disabled</title>
</head>
<body>
<form>
日付を選択： <input type="date" id="dateSelect" disabled>
</form>
<button onclick="enableDateInput()">日付入力を有効化</button>
<div id="divDisplay"></div>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDate = document.getElementById("dateSelect");
    divDisplay.textContent = 'Date Input disabled: '+inputDate.disabled;
    function enableDateInput() {
        inputDate.disabled = false;
        divDisplay.textContent = 'Date Input disabled: '+inputDate.disabled;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が得られます。

「日付入力を有効化」ボタンをクリックする前：

ページ読み込み時点では、日付入力フィールドはdisabled属性によって無効化されており、表示には「Date Input disabled: true」と表示されます。ユーザーはカレンダーを開くことも日付を入力することもできません。

「日付入力を有効化」ボタンをクリックした後：

ボタンをクリックすると、JavaScriptのenableDateInput()関数が呼び出され、inputDate.disabledにfalseが設定されます。その結果、日付入力フィールドが有効になり、表示も「Date Input disabled: false」に更新されます。

まとめ

disabledプロパティを活用すれば、フォームの条件に応じて日付入力の可否を動的に切り替えることができます。例えば、他の項目の入力内容に応じて日付選択を許可する、特定の期間だけ入力をロックするといったUX向上のための実装にも役立ちます。

  1. HTML DOMのInput URL disabledプロパティとは？構文と実装例を解説

    HTML DOM Input URL disabledプロパティとはHTML DOMのInput URL disabledプロパティは、<input type=url>で作成されたURL入力フィールドが現在有効（enabled）なのか、無効（disabled）なのかを取得・設定するためのプロパティです。このプロパティを活用すると、JavaScriptから動的にフォームのURL入力欄を制御できます。たとえば、「送信ボタンが押された後に入力欄を編集不可にする」といった操作が簡単に実装できます。構文disabledプロパティの構文は以下のとおりです。現在の状態を取得する場合（true /

  2. HTML DOM Input Week disabled プロパティの使い方をわかりやすく解説

    HTML DOM の Input Week disabled プロパティは、週入力フィールド（<input type=week>）が有効（enabled）か無効（disabled）かを設定・取得するためのプロパティです。フォームの入力欄を一時的に操作できない状態にしたり、条件に応じて入力を受け付けられるように切り替えたりする際に活用できます。 構文 基本的な構文は以下のとおりです。 ブール値（true / false）を取得する場合 inputWeekObject.disabled disabled にブール値を設定する場合 inputWeekObject.disabled