チェックボックスの指定を2つ選択のみにしたいです

Question

前提・実現したいこと

はじめまして。PHP初学者です。
初歩的なご質問で申し訳ないのですがどうしても分からず困っております。

現在お問い合わせフォームの作成に挑戦しており、
あるチェックボックスで2つ選択した時のみ送信可(それ以外だとアラートではなく、文字列としてエラー表示)にしたいのですが情報が少なくどうすればいいか分からない状況です。

<tr>
<th class="number">
1
</th>
<td>
<label>選択1<input type="checkbox" name="good[]" value="選択1"></label>
</td>
</tr>
<tr>
<th class="number">
2
</th>
<td>
<label>選択2<input type="checkbox" name="good[]" value="選択2"></label>
</td>
</tr>
<tr>
<th class="number">
3
</th>
<td>
<label>選択3<input type="checkbox" name="good[]" value="選択3"></label>
</td>
</tr>
<tr>
<th class="number">
4
</th>
<td>
<label>選択4<input type="checkbox" name="good[]" value="選択4"></label>
</td>
</tr>
<tr>
<th class="number">
5
</th>
<td>
<label>選択5<input type="checkbox" name="good[]" value="選択5"></label>
</td>
</tr>

試したこと

jQuery(function() {
 
  // チェックボックスをチェックしたら発動
  jQuery('input[name="good[]"]').change(function() {
 
    // ①チェックが入ったチェックボックスの個数を変数に格納
    var len = jQuery('input[name="good[]"]:checked').length;
 
    // ②チェックが2つ以上入ったら
    if (len >= 2) {
 
      // ③disabledを付けてチェックできなくする
      jQuery('input[name="good[]"]').not(':checked').attr('disabled', 'disabled');
 
    // チェックが2つ未満だったら
    } else {
 
      // ④disabledを削除してチェックできるようになる
      jQuery('input[name="good[]"]').not(':checked').removeAttr('disabled');
    }
 
  });
});

補足情報（FW/ツールのバージョンなど）

上記のソースコードを試して成功したのはいいのですが、
チェック数が1だとそのまま送信できてしまうのでこのソースコードに
選択が2つ未満だった時、送信を押すと2つ選択されていません。のエラーメッセージを表示させるようにしたいです。
教えて頂きました内容はただコピペではなくしっかりと学び、次に活かしたいと思います。
文面が分かりづらいかもしれませんが、どうぞ宜しくお願い致します。

Comments

[June666]

チェックボックスを実装しているhtml部分をご提示ください。
あとタグがJavaになっているのでJavaScriptに直しておきましょう。

Answer 1

ざっくりこんな感じでどうでしょう？

Comments

[yambejp]

<script>
$(function(){
$('#f1').on('submit',function(e){
var l=$('input[name="good[]"]:checked').length;
if(l!==2){
alert('good は2つ選択');
e.preventDefault();
}
});
});
</script>
<form id="f1" method="post">
<label><input type="checkbox" name="good[]" value="1">1</label>
<label><input type="checkbox" name="good[]" value="2">2</label>
<label><input type="checkbox" name="good[]" value="3">3</label>
<input type="submit" value="send">
</form>

[lolo1005]

ありがとうございます！
このようなイメージなのですが、アラートではなくフォームに文字として出力は難しいのでしょうか？
他のフォーム項目が赤い文字で出力されているのでそれに合わせて表示したいのが理想です。
お忙しいとは思いますが宜しくお願い致します。

[lolo1005]

因みに使用しているのはプラグインのcontact form 7です。

[yambejp]

文字出力するなら、エラー出力場所を用意してそこに流し込むだけ

<script>
$(function(){
$('#f1').on('submit',function(e){
var l=$('input[name="good[]"]:checked').length;
var err={"goods":""};
if(l!==2){
err["goods"]="2つ選べ";
e.preventDefault();
}
$('.error[data-target="goods[]"]').text(err["goods"]);
});
});
</script>
<form id="f1" method="post">
<label><input type="checkbox" name="good[]" value="1">1</label>
<label><input type="checkbox" name="good[]" value="2">2</label>
<label><input type="checkbox" name="good[]" value="3">3</label>
<span class="error" data-target="goods[]"></span>
<input type="submit" value="send">
</form>

[yambejp]

チェックボックスのチェック数とかだとバリデートエンジンで指定するのは
かえってめんどうかもしれないので、普通にかいてみました

[lolo1005]

本当にありがとうございます。無事いけました。
これを機にしっかりと学ばせて頂きます！