jQueryが追加のタグ内で動作しない

Question

JavaScriptコードを特定のコードに向けようとしていますが、私はほとんどそこにいますが、最後のハードルに落ちました！

私はここで作成しようとしているもののフィドルを作成しました。

http://jsfiddle.net/k4mLb14n/1/

 <div class="pricing-levels-3"> 
     <p><strong>Which level would you like? (Select 3 Levels)</strong></p> 
     <input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br> 
     <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br> 
    </div> 

    <div class="pricing-levels-3"> 
     <p><strong>Which level would you like? (Select 3 Levels)</strong></p> 
     <label><input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1</label><br> 
     <label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2</label><br> 
     <label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3</label><br> 
     <label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4</label><br> 
     <label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5</label><br> 
     <label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6</label><br> 
     <label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7</label><br> 
    </div> 

だから、基本的に私は、チェックリストを作成し、あなたが選択できるアイテムの量を制限したい、私のバイオリンに私はそれをしたい正確にどのように最初のリストを持っている - あなたができるだけで3つの項目を選択しますが、2番目のリストでは必要な数だけ選択することができます。

唯一の違いは、チェックボックスが<label>タグであることです。これはどのようにコードを構造化したいのですが、これはJavaScriptが壊れてしまいます。

ここでは、2番目のリストで機能するようにjavascriptを調整します。

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

Answer 1

1つのオプションは、closestメソッドを使用している：

if ($(this).closest('.pricing-levels-3').find(':checked').length > limit) { 
    this.checked = false; 
} 

http://jsfiddle.net/k4mLb14n/2/