チェックボックスをトリガーとして活性・非活性を切り替える

はじめに

私は初学者のエンジニアです。
実務を通しての気付きなどを記事にしていきます。
これからエンジニアを志す方や同じ初学者の方の力になれれば幸いです。

チェックボックスでフォームの活性・非活性を切り替える

・チェックボックスでのアンケートで、「その他」を選んだ際のみ理由を記述してもらう

入力フォームをデザインしている中で、こうった実装が必要となりました。
「その他」の場合のみ入力した内容を受け付けたいので、チェックが入っていない時に書かれたら困る。
バックエンドでフラグを使って実装しても良いですが、わざわざ書くまでもないしそもそも入力出来ないようにしたらええやん、と。

そこで、
① 遷移した段階の初期画面ではテキストボックスは非活性で入力できない
②「その他」にチェックが入ったらテキストボックスを活性化させる
③「その他」のチェックを外したら再び非活性とする

これをJavaScriptで書くことにしました。

実装方法

まずはHTMLでチェックボックスとテキストボックスを実装します。

HTML

<div>
    <input class="form-check-input" id="chkbox" type="checkbox" />
    <label class="form-check-label" for="chkbox" >その他</label>
    <input class="form-control" id="textbox" type="text" disabled="disabled" />
</div>

< タグ名 disabled="disabled" >で要素を非活性化します。
これで①の非活性なテキストボックスが出来ました。

次に、②と③の実装をします。
こちらはJavaScriptで記述していきます。

JavaScript

$(function() {
  $('#textbox').attr('disabled', 'disabled');
  
  $('#chkbox').click(function() {
    if ($(this).prop('checked') == false) {
      $('#textbox').attr('disabled', 'disabled');
    } else {
      $('#textbox').removeAttr('disabled');
    }
  });
});

チェックボックスがクリックされたら関数が実行されます。
チェックが入っているかをtrue or falseで判断します。
trueならばdisabled要素がremoveされるので、テキストボックスが活性化します。

これで実装が完了しました。

活性化してる時だけplaceholderを入れる

これも実装します。
要領は一緒ですね。

JavaScript

$('#chkbox').click(function() {
    if ($(this).prop('checked') == true) {
        $('#textbox').attr('placeholder', '入力してください');
    } else {
        $('#textbox').removeAttr('placeholder');
    }
});

チェックが入っている時だけplaceholderを表示します。

最後に

以上がJavaScriptを使用して活性・非活性を切り替える方法でした。

最後まで読んでいただきありがとうございました。