【jQuery】Formの2重投稿を防ぐ方法（submitボタンが2つ以上ある場合）

Formの2重投稿はサーバ側でも防止するべきですが、UIを考えるとフロント側でも防止出来たほうが嬉しいですよね。

まず、submitボタンが1つの場合によくあるのは、submitボタンにdisableをかける方法。

例えばこんな感じ。

<!-- フォーム -->
<form id="sample_form">
  <button type="submit">submit</button>
</form>

<!-- スクリプト(jQuery読込前提) -->
<script>
$(function(){
  $('#sample_form').on('submit', function(){
    // submitボタンにdisabledをかける
    $(this).find('button[type="submit"]')
      .attr('disabled', 'disabled')
      .text('登録中…');
  });
});
</script>

cssメソッドでopacityをかけたり、pointer-eventsを切ったりすると、見た目も無効っぽくなります。

ただ、この方法だと2つ以上submitボタンが有る場合に問題が出てきます。

一般的にはsubmitボタンに別々のvalue属性を付けることで、submit時に押したボタンのvalueが送信されるため、どちらのボタンを押したかをサーバ側で判別できます。
しかし、submitボタンにdisabledをかけてしまうと、submit時に押したボタンのvalueが送信されません^^;

そこで、disabledをかけるのをやめ、submitイベント側で2回目以降はsubmitを中断させることで対応。

<!-- フォーム -->
<form id="sample_form">
  <button type="submit" name="submit" value="1">submit1</button>
  <button type="submit" name="submit" value="2">submit2</button>
</form>

<!-- スクリプト(jQuery読込前提) -->
<script>
$(function(){
  $('#sample_form').on('submit', function(){
    // 一度submitされていればsubmitをキャンセル
    if ($(this).data('submitted')) { return false; }

    // submitボタンのテキスト変更
    $(this).find('button[type="submit"]')
      .text('登録中…');

    // submit済のフラグを立てる
    $(this).data('submitted', true);
  });
});
</script>

他にいい方法あれば教えて下さい！