BETA

jQueryで一回のみ押せる送信ボタン

投稿日:2018-11-15
最終更新:2018-12-26

自分用Scriptメモ。jQuery2,3系に対応。

一回押したらそれ以上押せないようにjQuery側で制御しています。(※CSSは適当にあてているのでブラウザ対応を考えておりません)

実行結果

内容は以下の通り。

HTML

<div class="form">  
  <div>  
    <label>Subject</label>  
    <input name="subject" type="text">  
  </div>  <div>  
    <label>Body</label>  
    <textarea name="body" rows="4"></textarea>  
  </div>  

  <div class="submit">  
    <input type="submit" value="送信" id="submit" class="btn">  
    <span class="btn  sending" style="display: none;">送信中…</span>  
  </div>  
</div>  

CSS

* {  
  box-sizing: border-box;  
}  

.form {  
  border: 1px solid #ddd;  
  border-radius: 2px;  
  margin: 30px auto;  
  padding: 20px;  
  width: 400px;  
}  
.form label {  
  color: #999;  
  font-size: 12px;  
  font-weight: bold;  
  display: block;  
}  
.form input, textarea {  
  background: #eee;  
  border: 0;  
  border-radius: 2px;  
  font-size: 14px;  
  line-height: 24px;  
  margin: 5px 0 15px 0;  
  padding: 6px 8px;  
  width: 100%;  
}  

.submit {  
  text-align: center;  
}  
.submit .btn {  
  background: #0097A7;  
  border: 0;  
  border-radius: 2px;  
  color: #fff;  
  cursor: pointer;  
  display: inline-block;  
  font-size: 13px;  
  line-height: 24px;  
  margin: 0;  
  padding: 6px 8px;  
  width: 120px;  
}  
.submit .btn.sending {  
  background: #666;  
  cursor: not-allowed;  
}  

JavaScript(jQuery)

$('#submit').on('click', function() {  
  $(this).hide();  
  $(this).next().show();  
});  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

web中心のメモ置き場。プログラミングからデザインまで。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!