При выборе главного checkbox'а выбираются все остальные, привязанные к нему, и наоборот, при выборе всех привязанных выбирается и главный.
Реализовать необходимо так, чтобы можно было использовать несколько групп на странице в пределах одной формы.
Поэтому сейчас реализовано так: у главного checkbox'а есть id, который совпадает с классами зависимых checkbox'ов. Классы могут быть любые - главное что они совпадают с id главного checkbox'а.
Рабочий код можно посмотреть ниже, но он слишком массивный. Есть ли более элегантные решения, желательно легко модифицируемые?
$(document).on("change", "input[type=checkbox]", function() { // По изменению checkbox'а
if ($(this).attr('class')) {
var CBgroupID = $(this).attr('class');
}
if (($(this).attr('id')) && ($('input[type="checkbox"].' + $(this).attr('id')).length)) {
var CBgroupID = $(this).attr('id');
if (this.checked) {
$('input[type="checkbox"].' + CBgroupID).attr('checked', 'checked');
$('input[type="button"][class*="' + CBgroupID + '"]').removeAttr('disabled');
} else {
$('input[type="checkbox"].' + CBgroupID).removeAttr('checked');
$('input[type="button"][class*="' + CBgroupID+'"]').attr('disabled', 'disabled');
}
}
if (!CBgroupID) {
return;
}
if ($('input[type="checkbox"].' + CBgroupID + ':not(:checked)').length) {
$('input[type="checkbox"]#' + CBgroupID).removeAttr('checked');
} else {
$('input[type="checkbox"]#' + CBgroupID).attr('checked', 'checked');
}
if ($('input[type="checkbox"].' + CBgroupID+':checked').length) {
$('input[type="button"][class*="' + CBgroupID + '"]').removeAttr('disabled');
} else {
$('input[type="button"][class*="' + CBgroupID + '"]').attr('disabled', 'disabled');
}
if ($('input[type="checkbox"].' + CBgroupID + ':checked').length === 1) {
$('.jToEdit').removeAttr('disabled');
} else {
$('.jToEdit').attr('disabled', 'disabled');
}
delete CBgroupID;
});
Группа 1
ОбщийГруппа 2
ОбщийПример в fiddle
Ответ
$(document).on('change', 'input[type=checkbox]', function () { var $this = $(this), $chks = $(document.getElementsByName(this.name)), $all = $chks.filter(".chk-all"); if ($this.hasClass('chk-all')) { $chks.prop('checked', $this.prop('checked')); } else switch ($chks.filter(":checked").length) { case +$all.prop('checked'): $all.prop('checked', false).prop('indeterminate', false); break; case $chks.length - !!$this.prop('checked'): $all.prop('checked', true).prop('indeterminate', false); break; default: $all.prop('indeterminate', true); } });
Комментариев нет:
Отправить комментарий