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();  
});  
記事が少しでもいいなと思ったらクラップを送ってみよう!
36
+1
@tanakashiの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする