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

Question

[dmitry]

Есть кастомный селект который сделан с помощью библиотеки Choices.js, внутри каждого option лежит чекбокс который не хочет переключатся.

const selectMulti = document.querySelector(".select__multi");

 const choicesMulti = new Choices(selectMulti, {
    searchEnabled: false,
    itemSelectText: "",
    shouldSort: false,
    renderSelectedChoices: "always",
    silent: true,

    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"' : ""}>
                <div class="form__select-wrapper">
                  <div class="select__text">${String(data.label)}</div>
                </div>
                </div>
              `);
        },
        choice: ({ classNames }, data) => {
          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"'
          }>
                <div class="select__wrapper">
                  <div class="form__select-checkbox">
                    <label class="form__checkbox-label">
                      <div class="form__checkbox-text">
                        ${String(data.label)} 
                      </div>
                      <input class="form__checkbox-input" type="checkbox" name="checkbox" checked onclick="event.stopPropagation()">
                      <span class="form__checkbox-box"></span>
                    </label>
                  </div>
                </div>
                </div>
              `);
        },
      };
    },
  });

<div class="form__field form__field-select">
              <select class="select__multi select--multiple" multiple>
                <option>Ww</option>
                <option>Eu</option>
                <option>Asia</option>
                <option>AFRICA</option>
                <option>LATAM</option>
                <option>MENA</option>
                <option>Australia</option>
              </select>
              <div class="form__multiple-arrow">
             
              </div>
              <div class="form__field-icon">
       
              </div>
              <label class="form__field-label form__field-label--messenger"></label>
                >What GEO can you cover?</label
              >
            </div>

.form {
 &__checkbox-label {
    position: relative;
    display: flex;
    align-items: center;
  }

  &__checkbox-input {
    position: absolute;
    left: 2rem;
    width: 0.1rem;
    height: 0.1rem;
  }

  &__checkbox-box {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    border: 0.1rem solid var(--clr-default-900);
    width: 2rem;
    height: 2rem;
  }

  &__checkbox-input:checked + &__checkbox-box {
    background-color: red;
  }
}

Comments

[imko]

А там точно нужны чекбоксы? Может просто сделать множественный селект а в опшонах сделать просто декораторы выглядящие как чекбокс?

[dmitry]

imko, Примерно таким способом и решили задачу

Answer 1

[maya042]

Я делала без инпутов и меняла иконки, в зависимости от того, выбран ли 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>
                            `);
                    },
                };
            },

Comments

[dmitry]

Спасибо за ответ, ваш пример был бы отличным решением. Только мне надо удалять значение из селекта посредству снятия галочки из чекбокса, в самом option и наоборот соответственно. А пока сами даже чекбоксы не могут внутри быть чекнутыми или анчекнутыми, хотя если их вынести из обертки для choices, работают отлично.

[maya042]

dmitry, наверное choices клики перехватывает и ничего не работает внутри. Надо вручную делать
Забыла добавить. Для удаления по клику вот такое надо

this._markChoice.passedElement.element.addEventListener('choice', function(event) {
            if (event.detail.choice.selected) {
                setTimeout(() => {
                    _this._markChoice.removeActiveItemsByValue(event.detail.choice.value);
                    _this._markChoice._triggerChange(event.detail.choice.value);
                }, 100)
            }
        })

_this._markChoice - это у меня инстанс choices.js

[dmitry]

Дай вам бог здоровья! В купе с этим кодом у меня получилось! Осталось немного стилизовать и добавить пару параметров.
P.S Я забил на клики чекбокса, и просто добавляю стили в зависимости data.selected, это отличное решение!

Спасибо большое!

Моё готовое решение выглядит так (возможно помогу кому-то) :

const choicesMulti = new Choices(selectMulti, {
    searchEnabled: false,
    itemSelectText: "",
    shouldSort: false,
    renderSelectedChoices: "always",

    callbackOnCreateTemplates: function (template) {
      this.passedElement.element.addEventListener("choice", (event) => {
        if (event.detail.choice.selected) {
          setTimeout(() => {
            this.removeActiveItemsByValue(event.detail.choice.value);
            this._triggerChange(event.detail.choice.value);
          }, 100);
        }
      });

      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"' : ""}>
                <div class="form__select-wrapper">
                  <div class="select__text">${String(data.label)}</div>
                </div>
                </div>
              `);
        },
        choice: ({ classNames }, data) => {
          const icon = data.selected ? "active" : "";

          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"'
          }>
                <div class="select__wrapper">
                  <div class="form__select-checkbox">
                    <label class="form__checkbox-label">
                      <div class="form__checkbox-text">
                        ${String(data.label)}
                      </div>
                      <input class="form__checkbox-input" type="checkbox" name="checkbox">
                      <span class="form__checkbox-box ${icon}"></span>
                    </label>
                  </div>
                </div>
                </div>
              `);
        },
      };
    },
  });