Для правильного рендеринга чекбоксов в кастомном Choices.js, вы можете использовать callbackOnCreateTemplates для создания шаблона, содержащего чекбоксы и привязанные к ним события.
Пример кода:
```javascript
const customSelect = new Choices(element, {
callbackOnCreateTemplates: function(template) {
return {
choice: function(data) {
return template(`
<div class="choice ${data.disabled ? 'is-disabled' : ''}" data-value="${data.value}" ${data.disabled ? 'data-choice-disabled' : 'data-choice-selectable'}>
<input type="checkbox" class="choice__input" ${data.selected ? 'checked' : ''} ${data.disabled ? 'disabled' : ''} />
<label class="choice__label">${data.label}</label>
</div>
`);
},
};
},
});
```
В этом примере мы создаем новый шаблон "choice", который содержит чекбокс и метку для каждого варианта выбора. Класс "is-disabled" добавляется к варианту, если он отключен. Класс "choice__input" и атрибуты "checked" и "disabled" устанавливаются в зависимости от состояния варианта выбора.
Чтобы обработчики событий заработали на чекбоксах, вы можете добавить обработчики событий после создания элемента и передачи его в шаблон. Например, вы можете добавить обработчик события "change" для каждого чекбокса:
```javascript
const customSelect = new Choices(element, {
callbackOnCreateTemplates: function(template) {
return {
choice: function(data) {
const choiceElement = template(`
<div class="choice ${data.disabled ? 'is-disabled' : ''}" data-value="${data.value}" ${data.disabled ? 'data-choice-disabled' : 'data-choice-selectable'}>
<input type="checkbox" class="choice__input" ${data.selected ? 'checked' : ''} ${data.disabled ? 'disabled' : ''} />
<label class="choice__label">${data.label}</label>
</div>
`);
const checkboxElement = choiceElement.querySelector('.choice__input');
checkboxElement.addEventListener('change', function(event) {
// Обработчик события change
console.log(event.target.checked);
});
return choiceElement;
},
};
},
});
```
В этом примере мы добавляем обработчик события "change" для каждого чекбокса, который будет выполняться при изменении состояния чекбокса. Вы можете заменить console.log(event.target.checked) на вашу требуемую логику обработки событий.
Это пример улучшенного кастомного multiple селекта, который использует callbackOnCreateTemplates от Choices.js для рендеринга чекбоксов и добавляет обработчики событий на чекбоксы. Вы можете дальше настраивать его в соответствии с вашими потребностями и стилями.
