[Bootstrap] Bootstrap 4 で確認ダイアログを表示し、選択ボタンを判断してsubmitする

バージョン

Bootstrap 4

概要

以下のケースを想定。
一覧表に「削除」ボタン(type=button)が複数あり、クリック時にBootstrap 4の確認ダイアログを表示して
「はい」なら選択した行のキーをsubmitする。

Bootstrap 4の確認ダイアログを出すだけなら公式サイトを。 getbootstrap.com

コード

■HTML

<button type="button" class="delete-confirm btn btn-success" value="A001" data-toggle="modal" data-target="#confirm-delete">削除</button>
<button type="button" class="delete-confirm btn btn-success" value="A002" data-toggle="modal" data-target="#confirm-delete">削除</button>
<button type="button" class="delete-confirm btn btn-success" value="A003" data-toggle="modal" data-target="#confirm-delete">削除</button>

<!-- Modal -->
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">確認</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                削除しますか?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">いいえ</button>
                <button type="submit" class="btn btn-success" id="deletebtn" name="deletebtn" >はい</button>
            </div>
        </div>
    </div>
</div>

Javascript

<script>
    $('.delete-confirm').click(function(){
        $('#deletebtn').val( $(this).val() );
    });
</script>

Modal部分はほぼ公式のコピペだが、「はい」ボタンをtype=submitにしている。
該当のボタンをclassからクリックイベントを生成し、
キーを確認ダイアログの「はい」ボタンのvalueにセットしてsubmitする仕組みを作った。