Limit Checkbox по классу

Question

Я знаю, что это может выглядеть как дубликат, но поверьте, я просмотрел каждый подобный пост, который я могу найти, но не нашел никаких решений. Я пытаюсь ограничить количество флажков, которые можно проверить, но я хочу, чтобы проверка была применена только к флажкам с class="calendar-checkbox". Тем не менее, я думаю, что моя структура div может помешать этому работать. Кажется, что он не проверяет каждый div="calendar-column".

<div id="calendar-wrapper"> 
     <div class="calendar-column"> 
      <input type="checkbox" name="date" value="2015-01-01" class="calendar-checkbox">01/01/2015<br> 
      <input type="checkbox" name="date" value="2015-01-02" class="calendar-checkbox">02/01/2015<br> 
     </div> 
     <div class="calendar-column"> 
      <input type="checkbox" name="date" value="2015-01-01" class="calendar-checkbox">01/01/2015<br> 
      <input type="checkbox" name="date" value="2015-01-02" class="calendar-checkbox">02/01/2015<br> 
     </div> 
     <div class="calendar-column"> 
      <input type="checkbox" name="date" value="2015-01-01" class="calendar-checkbox">01/01/2015<br> 
      <input type="checkbox" name="date" value="2015-01-02" class="calendar-checkbox">02/01/2015<br> 
     </div> 
     <div class="calendar-column"> 
      <input type="checkbox" name="date" value="2015-01-01" class="calendar-checkbox">01/01/2015<br> 
      <input type="checkbox" name="date" value="2015-01-02" class="calendar-checkbox">02/01/2015<br> 
     </div> 
    </div> 

Вот пример скрипта, я попробовал:

$('input[type=checkbox].calendar-checkbox').on('change', function(e) { 
    if($(this).siblings(':checked').length >= 3) { 
     this.checked = false; 
     alert('max limit'); 
    } 
}); 

Любая помощь будет принята с благодарностью.

Answer 1

На самом деле они не являются братьями и сестрами, вы можете напрямую использовать имя класса вместо

$('input[type=checkbox].calendar-checkbox').on('change', function(e) { 
    if($('input[type=checkbox].calendar-checkbox:checked').length >= 3) { 
     this.checked = false; 
     alert('max limit'); 
    } 
}); 

Fiddle

Answer 2

Пожалуйста, используйте ниже JS код, чтобы проверить

$('input[type="checkbox"].calendar-checkbox').change(function(e) { 
    if($('input[type="checkbox"].calendar-checkbox:checked').length >= 3) { 
     this.checked = false; 
     alert('max limit'); 
    } 
}); 

Demo

Answer 3

I предложите следующее:

$('input:checkbox').on('change', function(e) { 
    if($(this).parents("#calendar-wrapper").find(".calendar-checkbox:checked").length > 3) { 
     this.checked = false; 
     alert('max limit'); 
    } 
}); 

fiddle