2017-03-24 10 views
0

チェックボックスのグループから3つのチェックボックスを選択する必要があります。証明書番号を選択する必要があります。

私は選択肢を3以下に制限することができました。これは素晴らしいですが、グループのうち少なくとも3つを選択する必要があります。

 <div class="pricing-levels-3"> 
     <p><strong>Which levels would you like? (Select 3 Levels)</strong></p> 
     <input class="single-checkbox" type="checkbox" name="vehicle1" value="Bike1">Level 1<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle2" value="Bike2">Level 2<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle3" value="Bike3">Level 3<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle4" value="Bike4">Level 4<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle5" value="Bike5">Level 5<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle6" value="Bike6">Level 6<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle7" value="Bike7">Level 7<br> 
     </div> 

とjQuery:

var limit = 3; 
$('input.single-checkbox').on('change', function(evt) { 
    if($(this).siblings(':checked').length >= limit) { 
     this.checked = false; 
    } 
}); 

任意のアイデア

はここに私の例のHTMLですか? 3つのチェックボックスがチェックされているなら、あなたは確認することができ

var len = $(".single-checkbox:checked").length; // get length (amount) 

+0

私はあなただけの場合は '使う機能を提出におけるので、上の本をチェック提出したいと思いますと仮定しています(.siblings($(この)「:チェックする」)長さ<リミット。) ' – APAD1

+0

なぜrequired =" required "属性でこれをしないのですか? –

答えて

0

はこれを試してみてください。

if (len == 3) 
0
var limit = 3, checked = 0; 

$('input.single-checkbox').on('change', function(event) { 

    checked = $('input.single-checkbox:checked').length; 

    if(checked >= limit) { 
     this.checked = false; // OR event.preventDefault(); 
    } 
}); 

$('form').on('submit',function(e){ 
    if(checked < limit) 
    { 
     e.preventDefault(); 
     // alert('...'); 
    } 
}); 
関連する問題