每組至少有1個複選框？

Question

我想將新規則應用到我當前的jQuery驗證中，該驗證將檢查每個組是否至少有一個複選框已選中。

我的困難是我無法更改複選框名稱。

這裏是我當前的jQuery：

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script> 
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
    $('#docContainer').validate({ // initialize the plugin 
     rules: { 
      EMAIL: { 
       required: true, 
       email: true 
      }, 
      FNAME: { 
       required: true 
      }, 
      POSTCODE: { 
       digits: true, 
       minlength: 4 
      }, 
      mark1: { 
       required: function(elem) 
       { 
        if ($('input[name="group[20349][1]"]:checked').length > 0 || 
         $('input[name="group[20349][2]"]:checked').length > 0 || 
         $('input[name="group[20349][3]"]:checked').length > 0) 
        { 
         return true; 
        } 
        return false; 
       } 
      }, 
      mark2: { 
       required: function(elem) 
       { 
        if ($('input[name="group[20353][1]"]:checked').length > 0 || 
         $('input[name="group[20353][2]"]:checked').length > 0 || 
         $('input[name="group[20353][3]"]:checked').length > 0) 
        { 
         return true; 
        } 
        return false; 
       } 
      }, 
      mark3: { 
       required: function(elem) 
       { 
        if ($('input[name="group[20357][1]"]:checked').length > 0 || 
         $('input[name="group[20357][2]"]:checked').length > 0 || 
         $('input[name="group[20357][3]"]:checked').length > 0) 
        { 
         return true; 
        } 
        return false; 
       } 
      } 
     }, 
     messages: { 
      FNAME: "<b style='color:#FFFFFF'>Please fill your first name...</b>", 
      EMAIL: { 
       required: "<b style='color:#FFFFFF'>We need your email address to contact you!</b>", 
       email: "<b style='color:#FFFFFF'>Your email address must be in the format of name@domain.com</b>" 
      }, 
      POSTCODE: { 
       digits: "<b style='color:#FFFFFF'>Post Code must be numbers only...</b>", 
       minlength: "<b style='color:#FFFFFF'>Post Code must be at least 4 digits...</b>" 
      }, 
      mark1: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Type Of Property...</b>", 
      mark2: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Bedrooms...</b>", 
      mark3: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Price Range...</b>" 
     } 
    }); 
}); 
</script> 

mark1，mark2，mark3是創建領域，以適應作爲各組的規則中，你可以看到裏面，我複選框對每個和我唯一的名稱不能改變這一點。

組1又名mark1的組成如下：group[20349][1]，group[20349][2]，group[20349][3] 第2組又名mark2的組成如下：group[20353][1]，group[20353][2]，group[20353][3] 第3組又名mark3的組成如下：group[20357][1]，group[20357][2]，group[20357][3]

我問題在於規則不起作用，會觸發名稱，電子郵件，但在未選中每個組時都不會觸發複選框。

我該如何解決這個問題？

Answer 1

通過創建一個新的屬性，我的每一個組，我能夠解決這個問題的，當用戶試圖提交表單：

屬性添加爲data-foo="anynameyouwantforyourgroup"

$('#docContainer').submit(function() { 
    if ($('[data-foo=property]:checked').size() == 0) 
    { 
     alert('You must CHECK at least 1 option for group X'); 
     return false; 
    } 

    if ($('[data-foo=bedrooms]:checked').size() == 0) { 
     alert('You must CHECK at least 1 option for group Y'); 
     return false; 
    } 

    if ($('[data-foo=price]:checked').size() == 0) { 
     alert('You must CHECK at least 1 option for group Z'); 
     return false; 
    } 
    return true; 
}); 

Answer 2

使用本 -

if(!$('input[name="group[20349]').val()){ 
    // code on error 
} 

Answer 3

默認，jQuery Validate插件會自動確保組中至少有一個複選框被檢查。您只需將required規則應用於組。

jQuery的：

$(document).ready(function() { 

    $('#myform').validate({ 
     rules: { 
      checkboxGroup1: { 
       required: true 
      } 
     }, 
     messages: { 
      checkboxGroup1: { 
       required: "you must check at least one from Group 1" 
      } 
     } 
    }); 

}); 

HTML：

<form id="myform"> 
    <input type="checkbox" name="checkboxGroup1" /><br/> 
    <input type="checkbox" name="checkboxGroup1" /><br/> 
    <input type="checkbox" name="checkboxGroup1" /><br/> 
    <br/> 
    <input type="submit" /> 
</form> 

DEMO：http://jsfiddle.net/42PrP/