jQueryで特定のチェックボックスをチェックした状態で送信しようとするとダイアログを表示する方法

以下のようなフォームがあり削除のチェックボックスをチェックした状態でsubmitを押すと、
本当に送信してよいかどうかを確認するダイアログをjQueryを使い表示させたいと思っています。

<form method="post" action="control" enctype="multipart/form-data" name="edit" />
<div id="delete-field">
削除<input type="checkbox" name="delete" value="on">
</div>

<div id="submit-field">
<input type="submit" class="btn_submit" onClick="return FormChck()" />
</div>
</form>

送信ボタンを押した時にダイアログを表示させる方法、
特定のチェックボックスをチェックした時にアラートを表示させる方法は
それぞれ検索するとでてくるのですが、
２つを合わせたような特定のチェックボックスをチェックした状態で送信ボタンを押した時にダイアログを表示されるものが見つからず困っています。

実行したいことは「削除」チェックボックスをチェックした状態で送信ボタンを押すと
「本当に削除していいですか？」とダイアログを表示させ、
「OK」をクリックするとそのまま送信、
キャンセルをクリックすると送信せずにその画面にとどまるという処理をしたいと思っています。
削除チェックボックスをチェックしていない場合にはダイアログは表示させないようにしたいです。

お分かりの方がいましたらば、教えて頂けると助かります。
宜しくお願い致します。

No.1 ベストアンサー 回答者： yambejp 回答日時： 2016/11/21 16:10

ざっくりこんな感じです

<script>
$(function(){
$('.btn_submit').on('click',function(e){
if($(this).parents('form').find('[name=delete]:checked').length>0){
var flg=!confirm('本当に削除していいですか？');
if(flg) e.preventDefault();
}
});
});
</script>
<form method="post">
<input type="checkbox" name="delete" value="1">削除
<input type="submit" class="btn_submit" value="送信">
</form>
<form method="post">
<input type="checkbox" name="delete" value="1">削除
<input type="submit" class="btn_submit" value="送信">
</form>

deleteチェックボックスをどうやって拾うかによりますね
一応複数formがあった場合を想定してみました

この回答へのお礼

重ね重ねのご回答、本当にありがとうございます。
テストした結果、バッチリ動作してくれました。

自分で何時間も検索し、試行錯誤を繰り返してもうまくいかないことばかりなのですが、
教えていただいたご回答の内容を考察することでまた一つ勉強になります。
同時に自分の知識の無さに幻滅もしますが。。。

何度もご回答いただき本当にありがとうございました。
心からお礼申し上げます。

お礼日時：2016/11/21 17:23

No.2 回答者： naktak 回答日時： 2016/11/21 16:19

<script>

function FormChck() {
if (!$("input[name=delete]").prop("checked")) {
return true;
}
if (!confirm("本当に削除していいですか？")) {
return false;
}
return true;
}
</script>

この回答へのお礼

ご回答ありがとうございます。
教えていただきました内容でテストをしたところ動作してくれませんでした。
そこでHTMLで一から記述し再度テストしましたらば無事動作してくれました。

どうやら最初のうまくいかなかった原因はプログラム上の他の記述と干渉？していたようです。
教えていただいたソースはとても参考になりました。
ありがとうございました。

お二方ともベストアンサーとさせて頂きたいのですが、
今回は最初にご回答いただいた方をベストアンサーとさせて頂きますことをお許しください。
ご回答いただきありがとうございました。

お礼日時：2016/11/21 17:53