Метод disable

Метод disable в Slim Select используется для перевода элемента выбора в неактивное состояние. В этом режиме пользовательский интерфейс становится недоступным для взаимодействия: открытие списка, выбор значений и изменение текущего состояния блокируются. При этом внутренняя модель данных сохраняется, а текущее выбранное значение не сбрасывается.

С точки зрения архитектуры Slim Select, блокировка реализуется на уровне DOM-обёртки и логики обработчиков событий, что исключает возможность изменения состояния через пользовательские действия, но сохраняет программный доступ к API.

Базовое отключение экземпляра Slim Select

Наиболее распространённый сценарий применения disable — полное отключение экземпляра селекта.

const select = new SlimSelect({
  select: '#example'
});

select.disable();

После вызова метода:

  • выпадающий список перестаёт открываться
  • клики по компоненту игнорируются
  • визуальное состояние переключается в disabled-стиль
  • значение остаётся доступным через API

Поведение синхронизируется с нативным атрибутом disabled у исходного <select>.

Восстановление активности через enable

Метод disable всегда используется в паре с обратной операцией enable, обеспечивающей возврат интерактивности.

select.enable();

После вызова:

  • восстанавливается возможность открытия списка
  • возвращается обработка пользовательских событий
  • снимается визуальная блокировка

Внутренне происходит синхронизация состояния Slim Select с DOM-элементом, включая обновление атрибутов и повторную активацию event listener-ов.

Динамическое управление состоянием

Типичный сценарий использования — управление доступностью селекта на основе внешних условий: загрузка данных, выбор других полей формы, права пользователя.

const select = new SlimSelect({ select: '#city' });

function toggleAvailability(isAllowed) {
  if (isAllowed) {
    select.enable();
  } else {
    select.disable();
  }
}

При этом состояние может изменяться многократно без пересоздания экземпляра, что снижает нагрузку на DOM и предотвращает потерю выбранных значений.

Взаимодействие с нативным <select>

Slim Select не изолируется от оригинального элемента формы. Вызов disable влияет и на DOM-узел:

<select id="example">
  <option value="1">A</option>
  <option value="2">B</option>
</select>
const select = new SlimSelect({ select: '#example' });

select.disable();

Результат:

  • устанавливается disabled на <select>
  • браузер перестаёт учитывать элемент при отправке формы (в зависимости от состояния)
  • визуальная синхронизация сохраняется между Slim Select и нативным элементом

Поведение при множественном выборе

В режиме multiple: true метод disable блокирует изменение набора выбранных значений, но уже выбранные элементы остаются отображёнными.

const select = new SlimSelect({
  select: '#multi',
  multiple: true
});

select.disable();

Характер поведения:

  • добавление новых значений невозможно
  • удаление через UI недоступно
  • программное изменение через API остаётся возможным (в зависимости от реализации внешнего кода)
  • отображение выбранных тегов сохраняется

Частичное отключение через опции

Slim Select поддерживает отключение отдельных опций на уровне данных. Хотя это не прямое поведение метода disable, логика тесно связана с общей системой блокировок.

Пример структуры данных:

select.setData([
  { text: 'Option 1', value: '1' },
  { text: 'Option 2', value: '2', disabled: true }
]);

В этом случае:

  • метод disable применяется ко всему компоненту
  • свойство disabled работает на уровне конкретных элементов
  • комбинирование позволяет создавать гибкие состояния доступности

Поведение при повторных вызовах

Метод является идемпотентным: многократный вызов disable() не приводит к накоплению побочных эффектов.

select.disable();
select.disable();
select.disable();

Состояние остаётся стабильным:

  • повторная установка атрибутов не влияет на DOM сверх первого применения
  • обработчики событий уже отключены после первого вызова
  • визуальное состояние не изменяется повторно

Сценарии с асинхронной логикой

Часто disable используется во время асинхронных операций, например загрузки данных.

select.disable();

fetch('/api/options')
  .then(res => res.json())
  .then(data => {
    select.setData(data);
    select.enable();
  });

Логика поведения:

  • блокировка предотвращает неконсистентный выбор
  • обновление данных происходит без пользовательского вмешательства
  • восстановление активности выполняется после полной готовности данных

Влияние на события

После вызова disable большинство пользовательских событий, связанных с взаимодействием, перестают генерироваться:

  • open
  • change (через UI)
  • search (внутренний поиск)

При этом программные изменения состояния могут продолжать генерировать события, если они инициированы напрямую через API.

Стилизация состояния disabled

Slim Select автоматически применяет CSS-классы, отражающие неактивное состояние компонента. Это позволяет управлять визуальной индикацией без дополнительной логики.

Типичные изменения:

  • снижение контрастности текста
  • блокировка hover-состояний
  • изменение курсора на not-allowed
  • подавление анимаций открытия

При необходимости стили могут быть переопределены через пользовательские CSS-правила, ориентированные на классы контейнера Slim Select.

Особенности работы внутри форм

При использовании в <form> элементе поведение disable влияет на участие поля в отправке данных.

<form>
  <select id="country"></select>
</form>
select.disable();

Наблюдаемая логика:

  • в некоторых браузерах значение исключается из payload формы
  • в других — отправляется как пустое или игнорируется
  • Slim Select не изменяет поведение формы напрямую, а лишь синхронизирует состояние DOM

Комбинация с enable/disable логикой интерфейса

Типичная архитектура интерфейсов использует переключение состояния селектов в зависимости от бизнес-логики:

  • выбор региона активирует список городов
  • отсутствие данных блокирует фильтр
  • права доступа ограничивают выбор
regionSelect.onChange(() => {
  citySelect.disable();
  loadCities().then(() => citySelect.enable());
});

Поведение при уничтожении экземпляра

Метод disable не заменяет и не конфликтует с уничтожением экземпляра через destroy. После вызова destroy управление состоянием через disable становится недействительным, так как компонент более не связан с DOM.

Итоговые характеристики механизма disable

Функциональность метода формируется вокруг трёх базовых принципов:

  • блокировка пользовательского ввода без потери данных
  • синхронизация с нативным <select>
  • обратимость состояния через enable без пересоздания экземпляра
Оглавление