【JavaScript/jQuery】button type=”submit” リロードさせない JS

type="button"、type="submit"

同ページにおいて、type="button"、type="submit"のbuttonがあり、どちらも無効化させたい。
buttonの挙動について、前者は遷移だけでよく、後者はpost送信したい場合。

//submit
$(document).on('click','.send-btn', function(e)){
  e.preventDefault();//submit止める。この後の処理も動く
  $('.send-btn').prop('disabled',true);
  return false;//以降の処理は行われない
}
//button
if($('button').hasClass('send-btn')){
  $('.target-btn').prop('disabled', true);
  return false;
}

preventDefault()、return false について

Event.cancelableでキャンセル可能なイベントのうち(click、scroll、beforeunload等)、通常起こるイベントを発生させないようにする。
submitの場合には、ページ遷移するがそれ自体を止める。
return falseにすると、それ以降の処理が行われなくなる。

参照

・Event.preventDefault()
・JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識
・jQuery return false と preventDefault() の違い