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

HTML DOM Input Datetime の disabled プロパティの使い方を解説

HTML DOM の Input Datetime disabled プロパティは、日時入力フィールド（input type="datetime"）が有効か無効かを取得・設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にフォーム部品の操作可否を制御できます。

構文

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

値を取得する場合（真偽値 true / false を返す）

inputDatetimeObject.disabled

値を設定する場合（booleanValue を代入）

inputDatetimeObject.disabled = booleanValue

booleanValue に指定できる値

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

booleanValue
説明
true
日時入力フィールドが無効（disabled）であることを示します。
false
日時入力フィールドが無効化されていない（有効である）ことを示します。これがデフォルト値です。

サンプルコード

ここで、Input Datetime disabled プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Disabled</title>
</head>
<body>
<form>
Date & Time: <input type="datetime" id="datetimeSelect" value="1998-04-09T12:48IST" disabled>
</form>
<button onclick="enableDatetimeInput()">Enable Datetime Input</button>
<div id="divDisplay"></div>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetime = document.getElementById("datetimeSelect");
    divDisplay.textContent = 'Datetime Input disabled: '+inputDatetime.disabled;
    function enableDatetimeInput() {
        inputDatetime.disabled = false;
        divDisplay.textContent = 'Datetime Input disabled: '+inputDatetime.disabled;
    }
</script>
</body>
</html>

実行結果

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

「Enable Datetime Input」ボタンをクリックする前 −

HTML DOM Input Datetime の disabled プロパティの使い方を解説

初期状態では datetime 入力フィールドに disabled 属性が設定されているため、inputDatetime.disabled の値は true と表示され、ユーザーは日時を入力できません。

「Enable Datetime Input」ボタンをクリックした後 −

HTML DOM Input Datetime の disabled プロパティの使い方を解説

ボタンをクリックすると enableDatetimeInput() 関数が呼び出され、disabled プロパティに false が代入されます。その結果、入力フィールドが有効になり、表示も Datetime Input disabled: false に更新されます。

まとめ

disabled プロパティは、フォームの状態に応じて入力欄の有効／無効を切り替えたい場面で非常に便利です。例えば、他の項目の選択内容によって日時入力を許可・禁止するといったインタラクティブな UI を簡単に実装できます。

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

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

  2. HTML DOM Input Password の disabled プロパティの使い方を徹底解説

    HTML DOM の Input Password disabled プロパティは、パスワード入力フィールドを無効化するかどうかを設定・取得するために使用されるプロパティです。真偽値（boolean）を扱い、true は要素を無効にすること、false は有効であることを表します。デフォルト値は false です。無効化された要素は自動的にグレーアウト表示され、クリックやキーボード操作を受け付けなくなります。 構文 disabled プロパティの設定は、以下の構文で行います。 passwordObject.disabled = true|false; true を指定するとパスワードフィール