[解決済み] jQuery バリデーションで、少なくとも1つのチェックボックスが選択されていること

質問

フォームのチェックボックスのために、次のようなhtmlコードがあります。

<div class="drinking col-xs-12">
  <div class="col-xs-7 drinkingLeft">
    <input type="checkbox" name="allwines" id="allwines" value="0" class="require-one col-xs-1 styled myClassA"  value="0" data-label="All Wines" />
    <input id='allwinesHidden'  type='hidden' value='0' name='allwines'>
  </div>
  <div class="col-xs-5 drinkingLeft">
    <input type="checkbox" name="beer" id="beer" value="0" class="require-one col-xs-1 styled myClassB"  value="0"  data-label="Beer" />
    <input id='beerHidden'  type='hidden' value='0' name='beer'>
  </div>
  <div class="clearix"></div>
  <div class="col-xs-7 drinkingLeft">
    <input type="checkbox" name="redwines" id="redwines" value="0" class="require-one col-xs-1 styled myClassC"  value="0" data-label="Red Wines" />
    <input id='redwinesHidden'  type='hidden' value='0' name='redwines'>
  </div>
  <div class="col-xs-5 drinkingLeft">
    <input type="checkbox" name="cider" id="cider" value="0" class="require-one col-xs-1 styled myClassD"  value="0" data-label="Cider" />
    <input id='ciderHidden'  type='hidden' value='0' name='cider'>
  </div>
  <div class="clearix"></div>
  <div class="col-xs-7 drinkingLeft">
    <input type="checkbox" name="whitewines" id="whitewines" value="0" class="require-one col-xs-1 styled myClassE"  value="0" data-label="White Wines" />
    <input id='whitewinesHidden'  type='hidden' value='0' name='whitewines'>
  </div>
  <div class="col-xs-5 drinkingLeft">
    <input type="checkbox" name="spirits" id="spirits" value="0" class="require-one col-xs-1 styled myClassF"  value="0" data-label="Spirits" />
    <input id='spiritsHidden'  type='hidden' value='0' name='spirits'>
  </div>
  <div class="clearix"></div>
  <div class="col-xs-7 drinkingLeft">
    <input type="checkbox" name="sparkling" id="sparkling" value="0" class="require-one col-xs-1 styled myClassG"  value="0" data-label="Sparkling/Champagne" />
    <input id='sparklingHidden'  type='hidden' value='0' name='sparkling'>
  </div>
  <div class="col-xs-5 drinkingLeft">
    <input type="checkbox" name="fortified" id="fortified" value="0" class="require-one col-xs-1 styled myClassH"  value="0" data-label="Fortified" />
    <input id='fortifiedHidden'  type='hidden' value='0' name='fortified'>
  </div>
  <div id="error_msg3"></div>
  <div class="clearix"></div>
</div>
</div>

少なくとも1つのチェックボックスが選択されていることを確認したい。

私が欲しいのは NOT をアラートボックスとして使用します。ただし、メッセージはdiv error-msg3に表示される必要があります。

すべての入力は、異なるクラス名とIDを持っていることに注意してください。 ステージング・リンクは

https://bitly.com/1i3f1MY

フォームの残りの部分を検証するためにjQueryバリデーションを使用しています。jqueryのバリデーションで解決できるといいのですが。

よろしくお願いします。

解決方法は？

チェックボックスの名前属性を変更し、そのためのルールを minlength を 1 に設定します。

そして、カスタムメッセージを表示し、そのメッセージを付加して #error_msg3 を使って

if(element.attr("name") == "check") error.appendTo("#error_msg3")

エディテージ

$("input[type='checkbox'][name='check']").change(function() {
    if ($("input[type='checkbox'][name='check']:checked").length){
        $(this).valid()
    }
})

EDIT 2

Fiddleを更新しました。少なくとも1つのチェックボックスにチェックが入っているかどうかで、メッセージが正しくトグルするようになりました。

$("input[type='checkbox'][name='check']").change(function() {
    $('#submitDetails').valid();
});

フィドルはこちら