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

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

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

構文

基本的な構文は以下のとおりです。

ブール値（true / false）を取得する場合

inputWeekObject.disabled

disabled にブール値を設定する場合

inputWeekObject.disabled = booleanValue

指定できるブール値

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

booleanValue説明
true週入力フィールドが無効（操作できない状態）であることを示します。
false週入力フィールドが無効ではない（有効である）ことを示します。これがデフォルト値です。

サンプルコード

以下は Input Week disabled プロパティを使用した具体例です。初期状態では週入力フィールドが無効になっており、ボタンをクリックすると入力が可能な状態へ切り替わります。

<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>Week-disabled</legend>
<label for="WeekSelect">Sales Target Week:
<input type="week" id="WeekSelect" value="2020-W13" disabled>
</label>
<input type="button" onclick="enableWeekInput()" value="Change Sales Target Week">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputWeek = document.getElementById("WeekSelect");
   divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
   function enableWeekInput() {
      inputWeek.disabled = false;
      divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような画面が表示されます。

「Change Sales Target Week」ボタンをクリックする前の状態：

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

ボタンをクリックした後の状態：

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


  1. HTML DOM Input Week の type プロパティとは？使い方を解説

    はじめにHTML DOM の Input Week type プロパティは、週（week）型入力フィールドの type 属性を取得・設定するためのプロパティです。このプロパティを使うことで、JavaScript から対象の入力要素がどの種類（type）であるかを確認したり、別の type 値に変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 値を取得する場合 inputWeekObject.type 要素の type 属性の現在値が文字列として返されます。 値を設定する場合 inputWeekObject.type = stringValue 指定した

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

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