javascript フォームを非活性化させる

作成日 2021.05.06
更新日 2022.08.22
javascript
javascript

javascriptで、disabledを使用してフォームを非活性化させるサンプルコードを記述してます。

1. 環境
2. disabled使い方
3. 存在しない要素を指定
4. 複数の要素を指定
5. 活性化
6. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 104.0.5112.101

Javascript サンプル集はこちら

disabled使い方

「setAttribute」を使用して、属性「disabled」を「true」にすることにより、フォームを非活性化させることが可能です。

要素.setAttribute("disabled", true);

実際に、要素を非活性化してみます。

<input id="test" type="text" />

<script>

document.getElementById('test').setAttribute("disabled", true); 

</script>

実行結果

存在しない要素を指定

存在しない要素を指定するとエラーが発生します。

<input id="test" type="text" />

<script>

document.getElementById('noelm').setAttribute("disabled", true);
// Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

</script>

存在チェックを行うと、エラーは回避可能です。

<input id="test" type="text" />

<script>

if(document.getElementById('noelm') !== null){

    document.getElementById('noelm').setAttribute("disabled", true); 

}

</script>

複数の要素を指定

例えば「name」属性を指定して、複数の要素を「disabled」にする場合は、以下のように「for」文などを使用します。

<input name="test" type="text" />
<input name="test" type="text" />
<input name="test" type="text" />

<script>

const elm = document.getElementsByName("test");

// 存在チェック
if (0 < elm.length) {

    // for文を使用して削除
    for (let i = elm.length; i--;) {
        elm[i].setAttribute("disabled", true);
    }

}

</script>

実行結果

活性化

逆に非活性になっている要素を活性化するには「removeAttribute」で「disabled」を除去します。

要素.removeAttribute("disabled")

サンプルコード

以下は、
「実行」ボタンをクリックするとテキストボックスを非活性なら活性化、活性化されていれば非活性に変更する
サンプルコードとなります。

※cssには「tailwind」を使用してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<script>

  function hoge() {

    if (result.disabled === true) {
      // disabled除去
      result.removeAttribute("disabled");      
    } else {
      // disabled設定
      result.setAttribute("disabled", true);      
    }

  }

  window.onload = () => {
    // クリックイベントを登録
    btn.onclick = () => { hoge(); }; // document.getElementById('btn');を省略    
  }

</script>

<body>
  <div class="container mx-auto my-56 w-56 px-4">

    <div class="flex justify-center">
      
      <input id="result" type="text" class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline">
  
    </div>

    <div class="flex justify-center">

      <button id="btn" type="button"
        class="mt-5 bg-transparent border border-red-500 hover:border-red-300 text-red-500 hover:text-red-300 font-bold py-2 px-4 rounded-full">
        実行
      </button>
    </div>
  </div>

</body>

</html>

切り替えされていることが確認できます。