2014-08-29 4 views
0

У меня есть пара флажков, некоторые из которых уже проверены на загрузку страницы.Проверяются флажки с лимитом, включены флажки, отмеченные на загрузке страницы

Что я хочу сделать, это отключить другие флажки, если отмечены 2 окна.

Мой код отлично работает, если я сам проверяю/снимаю флажки. Но когда 2 бокса уже проверены (используя javascript или HTML) при загрузке страницы, еще один флажок можно проверить, пока поля не будут отключены.

Поскольку 2 флажка уже проверены на загрузку страницы, остальные флажки должны быть отключены до тех пор, пока я не сниму одну из двух отмеченных ящиков. В настоящее время это не так.

Это мой JavaScript:

jQuery(function($) { 

var max = 2; 
var checkboxes = $('input[type="checkbox"]'); 

    checkboxes.change(function(){ 
     var current = checkboxes.filter(':checked').length; 
     checkboxes.filter(':not(:checked)').prop('disabled', current >= max); 
    }); 

    $('.one').attr('checked','checked'); 
    $('.two').attr('checked','checked'); 

}); 

, который идет ниже мои флажки:

 <div id="checkboxes"> 
       <input type="checkbox" class="1" id="checkbox" name='Some[array]' value="1"> 
       <input type="checkbox" class="2" id="checkbox" name='Some[array]' value="2"> 
       <input type="checkbox" class="3" id="checkbox" name='Some[array]' value="3"> 
       <input type="checkbox" class="4" id="checkbox" name='Some[array]' value="4"> 
     </div> 

ответ

2

Просто огнь .change() события при загрузке страницы:

checkboxes.change(function() { 
    var current = checkboxes.filter(':checked').length; 
    checkboxes.filter(':not(:checked)').prop('disabled', current >= max); 
}).change(); 

jsFiddle example

+0

Да, это лучшее решение, чем мое. – Ohgodwhy

+0

Отлично, спасибо! – Dean

1

Ваши селекторы ошибочны, и событие checked не срабатывает, если вы программно измените значение. Однако вы можете инициировать событие изменения вручную, чтобы заставить ваш код работать, когда вы первоначально устанавливали значения. Используйте две строки ниже:

$('.1').prop('checked','checked').change(); 
$('.2').prop('checked','checked').change(); 
Смежные вопросы