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

HTML DOM 入力月（month）の disabled プロパティの使い方を徹底解説

disabled プロパティとは

HTML DOM における input month（type="month"）要素の disabled プロパティは、HTML 文書内にある月入力フィールドが「無効化（disabled）」されているかどうかを取得し、さらにその状態を変更することもできるプロパティです。

このプロパティを使うことで、JavaScript から動的に月入力フィールドの操作可否を切り替えることが可能になります。

構文

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

1. 無効化状態を取得する場合

object.disabled

2. 無効化状態を設定する場合

object.disabled = true | false
  • true を設定すると、入力フィールドは無効化され、ユーザーが値を入力できなくなります。
  • false を設定すると、入力フィールドは有効になり、通常どおり入力できるようになります。

使用例

ここでは、ボタンをクリックするたびに月入力フィールドの有効／無効を切り替えるサンプルを紹介します。

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
      center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.2rem;
   }
   input{
      width:35%;
      border:2px solid #fff;
      background-color:transparent;
      color:#fff;
      font-weight:bold;
      padding:8px;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Input Month disabled プロパティの例</h1>
<p>こんにちは。お誕生月を入力してください</p>
<input type="month" class="monthInput">
<button onclick="disEna()" class="btn">無効化 / 有効化</button>
<div class="show"></div>
<script>
   function disEna() {
      var monthInput = document.querySelector(".monthInput");
      var showMsg = document.querySelector(".show");
      showMsg.innerHTML ="";
      if (monthInput.disabled === true){
         monthInput.disabled = false;
         showMsg.innerHTML ="以前は無効でしたが、現在有効になっています";
      } else {
         monthInput.disabled = true;
         showMsg.innerHTML ="以前は有効でしたが、現在無効になっています";
      }
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM 入力月（month）の disabled プロパティの使い方を徹底解説

「無効化 / 有効化」ボタンをクリックすると、月入力フィールドの状態が切り替わります。

HTML DOM 入力月（month）の disabled プロパティの使い方を徹底解説

ポイントまとめ

  • disabled プロパティは真偽値（true / false）を返します。
  • 無効化された入力フィールドは、フォーム送信時にも値が送信されない点に注意が必要です。
  • 条件分岐と組み合わせることで、ユーザーの操作状況に応じた柔軟なフォーム制御が実現できます。
  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