Ограничение количества флажков для проверки jQuery

Question

У меня есть веб-страница с несколькими группами флажков (в каждой группе все флажки имеют один и тот же класс).Я хочу не только ограничить количество флажков, которые могут быть отмечены, но также следующее: если максимальное количество флажков, которые нужно отметить, равно 3, а пользователь установил 4-й флажок, вместо отображения сообщения, я хотел быснимите флажок, который был выбран самый длинный назад.Как этого добиться, если у меня есть несколько групп флажков, и у каждой группы есть различное максимально допустимое число флажков?

Кстати, я не использую элемент флажка jQuery UI.

Спасибо!

Answer 1

Прежде всего, вы должны:

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

Вы можете использовать следующие функции jQuery:

• .delegate(), .change(), .live() или .bind() для прикрепления событий,
• data- HTML-атрибуты для хранения меток времени JS (например, вы можете иметь <input type="checkbox" data-checked="1310950561097" />),
• .parents() для выбора контейнера группы флажков,
• Функция jQuery .each() для обхода всех отмеченных флажков в одной группе (тот же контейнер, упомянутый выше),

Используя эти функции, вы получите то, что вам нужно.

Answer 2

Мои первые мысли об этой проблеме:

var checkorder = [];
$('input:checkbox.checkboxes').click(
    function(){
        checkorder.push($(this).index('input:checkbox'));
        if (checkorder.length > 3){
            $('input:checkbox.checkboxes').eq(checkorder[0]).removeProp('checked');
            checkorder.splice(0,1);
        }
    });

JS Fiddle demo .

Проблемы с этим подходом:

1. Применяет выделение ко всем флажкам с одинаковым class.
2. Не делает различий между щелчком мыши, чтобы установить или снять флажок.

<ч />

Ссылки:

• :checkbox -селектор .
• push().
• index().
• eq().
• removeProp().
• splice().

Answer 3

, чтобы добавить событие в группу флажков, которые вы используете, метод jQuery delegate, например:

$('#checkbox-container').delegate('checkbox', 'change', function (event) {
  // event.target is the clicked checkbox element here
});