【HTML】disabled属性を用いてボタンを押せないようにする方法

入力フォームの送信ボタンに"disabled"属性を追加することで
ボタンをクリックしても実行できないようにすることが可能です!!

それでは見ていきましょう。

disableとは

要素をクリックしても 送信や入力などができなくなるHTMLの属性の一つです。
主にinputやbuttonなどのボタン要素、またtextareaなどの入力要素に用いられます！
このようにボタンを効かなくすることを「非活性・不活性」と言います。

disabledの使い方

inputタグに"disabled"と記述するだけです。

<input value="can push this" type="submit">   //普通のインプットタグ

<input value="can't push this" type="submit" disabled>  //disabledを最後に追加 

このように、二番目のボタンは押せなくなっており
ボタン自体がやや薄くなっています。

ドロップダウンで、特定の選択だけボタンを押せないようにする

ドロップダウンの最初の選択肢(初期値)を「選択してください」にし、
その状態だと送信ボタンが押せないようにしていきたいと思います。

See the Pen 特定の選択をすると送信ボタンが押せなくなる by たまき こう (@ulqvhvox) on CodePen.

まずは、HTMLにドロップダウンを作っていきます。

<input type="button" id="button" value="送信する">

<select name="month" id="select">
<option value="placeholder">選択してください</option>
<option value="feb">2月</option>
<option value="mar">3月</option>
<option value="apr">4月</option>
<option value="may">5月</option>
<option value="jun">6月</option>
<option value="jul">7月</option>
<option value="aug">8月</option>
<option value="sep">9月</option>
<option value="oct">10月</option>
<option value="nov">11月</option>
<option value="dec">12月</option>
</select>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

selectでドロップダウンのボックスを作成し、
optionタグで一つ一つの選択肢を作ることができます。
初期値は、一番先頭の'option'になりますので「選択してください」を一番先頭にします。

次にjs・jの部分です。

$("#button").prop("disabled", true);

var select = document.querySelector("#select");
select.addEventListener('change', function(){
  selectedCheck();
})

function selectedCheck(){
  var city = $('select').val();
  if(city !== "placeholder" ){
    $("#button").prop("disabled", false);
  }else{
    $("#button").prop("disabled", true);
  }
}

以下を追加することで要素を非活性にすることができます。

element.prop("disabled","true")

そして、選択が変更されるたびにイベントを発火させる処理を記述します。

select.addEventListener('change', function(){
  (処理)
})

そして、選択された要素のvalueをとってくるjqの関数を記述します。
valueの値によって disabledの値を変化させれば完成です。

$("input").val()

このようにdisabledをうまく利用すれば、
簡易なプレースホルダーを作り上げることができます 。

是非参考にしてみてください！

終わり！