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

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

HTML DOMのInput DatetimeLocal disabledプロパティは、<input type="datetime-local">で作成された入力フィールドが有効（enabled）か無効（disabled）かを取得・設定するためのプロパティです。ユーザーの操作に応じてフォームの入力可否を動的に切り替えたい場合に活用できます。

構文

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

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

inputDatetimeLocalObject.disabled

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

inputDatetimeLocalObject.disabled = booleanValue

指定できるブール値

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

booleanValue説明
truedatetime-local入力フィールドが無効（操作不可）であることを示します。
falsedatetime-local入力フィールドが無効ではない（操作可能）ことを示します。これがデフォルト値です。

サンプルコード

Input DatetimeLocal disabledプロパティの具体的な使用例を見てみましょう。この例では、初期状態で無効化されているdatetime-local入力フィールドを、ボタンのクリックによって有効化します。

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal Disabled</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Datetime-Local-disabled</legend>
<label for="datetimeLocalSelect">Examination Time:
<input type="datetime-local" id="datetimeLocalSelect" value="2019-07-05T20:45" disabled>
</label>
<input type="button" onclick="enableDatetimeLocalInput()" value="Change Examination Date and Time">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
   divDisplay.textContent = 'DatetimeLocal Input disabled: '+inputDatetimeLocal.disabled;
   function enableDatetimeLocalInput() {
      inputDatetimeLocal.disabled = false;
      divDisplay.textContent = 'DatetimeLocal Input disabled: '+inputDatetimeLocal.disabled;
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような表示になります。

「Change Examination Date and Time」ボタンをクリックする前

ページ読み込み時点では、datetime-local入力フィールドはdisabled属性により無効化されており、画面には「DatetimeLocal Input disabled: true」と表示されます。

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

「Change Examination Date and Time」ボタンをクリックした後

ボタンをクリックするとJavaScriptの関数が実行され、disabledプロパティにfalseが設定されるため、入力フィールドが有効になり、「DatetimeLocal Input disabled: false」と表示が更新されます。

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

まとめ

Input DatetimeLocalのdisabledプロパティを使えば、JavaScriptから簡単にdatetime-local入力フィールドの有効・無効を制御できます。条件に応じてフォームの入力をロックしたり解除したりするなど、インタラクティブなWebフォームを実装する際にぜひ活用してください。

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

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

  2. HTML DOM Input Search の disabled プロパティとは？使い方を解説

    disabled プロパティとはHTML DOM の Input Search disabled プロパティは、検索フィールド（<input type=search>）を無効化するかどうかを設定、または取得するためのプロパティです。ブール値（true / false）を受け取り、true を指定すると要素が無効になり、false を指定すると有効になります。デフォルト値は false です。無効化された検索フィールドは自動的にグレーアウト表示され、クリックや文字入力など、ユーザーによる一切の操作が受け付けられなくなります。構文disabled プロパティを設定する構文は以下のとおり