Как настроить функционирование чекбоксов внутри Choices.js?

Для настройки функционирования чекбоксов внутри Choices.js, вы можете использовать следующие опции:

1. `shouldSort`: Установите это свойство в `true`, чтобы включить сортировку вариантов. По умолчанию установлено значение `false`.

```javascript
new Choices(element, {
  shouldSort: true,
});
```

2. `removeItems`: Установите это свойство в `true`, чтобы разрешить пользователю удалять выбранные элементы (выбранные чекбоксы). По умолчанию установлено значение `false`.

```javascript
new Choices(element, {
  removeItems: true,
});
```

3. `maxItemCount`: Установите это свойство, чтобы ограничить максимальное количество выбранных элементов. Значение должно быть целым числом.

```javascript
new Choices(element, {
  maxItemCount: 3,
});
```

4. `noChoicesText`: Установите это свойство, чтобы задать текст, который будет отображаться, когда нет доступных вариантов для выбора.

```javascript
new Choices(element, {
  noChoicesText: 'Нет доступных вариантов',
});
```

5. `noResultsText`: Установите это свойство, чтобы задать текст, который будет отображаться, когда результаты поиска не найдены.

```javascript
new Choices(element, {
  noResultsText: 'Нет результатов',
});
```

6. `itemSelectText`: Установите это свойство, чтобы задать текст, который будет отображаться, когда имя элемента выбрано из списка вариантов.

```javascript
new Choices(element, {
  itemSelectText: 'Нажмите, чтобы выбрать',
});
```

7. `loadingText`: Установите это свойство, чтобы задать текст, который будет отображаться, когда загружаются дополнительные варианты.

```javascript
new Choices(element, {
  loadingText: 'Загрузка...',
});
```

8. `searchEnabled`: Установите это свойство в `false`, чтобы отключить возможность поиска вариантов. По умолчанию установлено значение `true`.

```javascript
new Choices(element, {
  searchEnabled: false,
});
```

Вы можете комбинировать эти опции в соответствии со своими потребностями, чтобы настроить функциональность чекбоксов внутри Choices.js.

Если использовать атрибуты инпутов, то можно менять иконки в зависимости от выбранного option. В методе choice проверяем значение data.selected и устанавливаем соответствующий класс или атрибут.

callbackOnCreateTemplates: function(template) {
  return {
    item: ({ classNames }, data) => {
      return template(`
        <div class="${classNames.item} ${
          data.highlighted
            ? classNames.highlightedState
            : classNames.itemSelectable
        } ${
          data.placeholder ? classNames.placeholder : ''
        }" data-item data-id="${data.id}" data-value="${data.value}" ${
          data.active ? 'aria-selected="true"' : ''
        } ${data.disabled ? 'aria-disabled="true"' : ''}>
           ${data.label}
           <button type="button" class="choices__button" aria-label="Удалить марку: ${data.label}" data-button="">Удалить марку</button>
        </div>
      `);
    },
    choice: ({ classNames }, data) => {
      var icon = (data.selected) ? 'checked' : 'unchecked';
      return template(`
        <div class="${classNames.item} ${classNames.itemChoice} ${
          data.disabled ? classNames.itemDisabled : classNames.itemSelectable
        }" data-select-text="${this.config.itemSelectText}" data-choice ${
          data.disabled
            ? 'data-choice-disabled aria-disabled="true"'
            : 'data-choice-selectable'
        } data-id="${data.id}" data-value="${data.value}" ${
          data.groupId > 0 ? 'role="treeitem"' : 'role="option"'
        }>
          <i class="flaticon-${icon}"></i> 
          ${data.label}
          <span>${data.customProperties.num}</span>
        </div>
      `);
    },
  };
},