JavaScript 活性・非活性の制御について

1. 必要なもの

・HTML
・JavaScript

2. 入力画面の作成

1. 制御フラグにチェックが付いていない場合、活性状態。

2.制御フラグにチェックが付いた場合、非活性状態に変更することができる。

3.以下のようなHTMLを作成。

<form id="detailForm" method="post">
  <div class="bd-example">
    <div class="form-group">
      <label class="small">テキスト入力</label>
      <input id="text" type="text" maxlength="50" placeholder="件名" class="form-control">
    </div>
    <div class="form-group form-row">
      <div class="col-sm-6">
        <label class="small">日付入力</label>
        <input id="date" class="form-control" type="date" placeholder="日付入力">
      </div>
      <div class="col-sm-6">
        <div class="">
          <label class="small control-label">制御フラグ</label>
        </div>
        <input id="controllFlg" type="checkbox" class="align-middle" style="width: 150px; height: 35%;" placeholder="制御フラグ" onchange="myFunc()">
      </div>
    </div>
    <div class="form-group form-row">
      <div class="col-sm-6">
        <label class="small">テキストエリア</label>
        <textarea id="textarea" class="form-control" placeholder="テキストエリア"></textarea>
      </div>
      <div class="col-sm-6">
        <label class="small">数値入力</label>
        <input id="number" class="form-control" type="number" min="1" placeholder="数値入力">
      </div>
    </div>
  </div>
</form>

4.以下のようなJavaScriptを作成する。

function myFunc() {
    var controllFlg = document.getElementById("controllFlg");

    // disabled
    // テキスト
    var target = document.getElementById("text");
    target.disabled = controllFlg.checked;

    // テキスト
    var target = document.getElementById("date");
    target.disabled = controllFlg.checked;

    // テキスト
    var target = document.getElementById("textarea");
    target.disabled = controllFlg.checked;

    // テキスト
    var target = document.getElementById("number");
    target.disabled = controllFlg.checked;
}

HTMLのコードにて、
制御フラグのタグにonchange="myFunc()"を指定することで、
チェックボックスの値が変わった場合にJavaScriptの関数を呼び出すことができる。

JavaScriptのコードにて、
document.getElementById を使い、
チェックボックスに指定しているIDを指定しhtmlの情報を取得する。
チェックしているかどうかは、checked 要素から取得が可能である。

さらにdocument.getElementById を使い、
各項目のIDを指定しhtmlの情報を取得する。
各項目の活性・非活性を制御するには、disabled 要素に
true ,false を指定することで制御が可能である。

今回はチェックボックスがチェックしているかどうかで制御している。
この仕組みを利用して、チェックボックス以外でも
他の項目に値が入っているかどうかで活性・非活性の制御することも可能である。