Отключение опций

В Slim Select управление доступностью элементов списка строится на уровне данных, а не DOM-разметки. Каждая опция представляется объектом, в котором может быть явно задан флаг disabled. Такой подход позволяет централизованно контролировать состояние элементов и динамически изменять его без пересоздания компонента.

Базовая модель отключённой опции

Каждый элемент списка в Slim Select описывается структурой:

{
  text: 'Название элемента',
  value: 'unique_value',
  disabled: true
}

Ключевым полем выступает disabled. При установке значения true элемент:

  • отображается в списке, но визуально помечается как недоступный
  • не может быть выбран пользователем
  • игнорируется при навигации с клавиатуры
  • не попадает в результат выбора при программном управлении через интерфейс выбора

Инициализация с отключёнными элементами

Отключённые опции задаются на этапе формирования массива данных, перед передачей в экземпляр Slim Select.

new SlimSelect({
  select: '#example-select',
  data: [
    { text: 'Активная опция 1', value: '1' },
    { text: 'Недоступная опция', value: '2', disabled: true },
    { text: 'Активная опция 3', value: '3' }
  ]
});

Такой подход используется, когда состояние элементов известно заранее: например, при загрузке справочников, где часть значений временно недоступна.

Динамическое отключение через обновление данных

Slim Select не предоставляет прямого метода «toggle disabled» для отдельных элементов, но изменение состояния реализуется через пересборку массива данных с последующим обновлением инстанса.

const ss = new SlimSelect({
  select: '#example-select',
  data: [
    { text: 'Опция A', value: 'a' },
    { text: 'Опция B', value: 'b' }
  ]
});

function disableOption(value) {
  const data = ss.getData().map(item => {
    if (item.value === value) {
      return { ...item, disabled: true };
    }
    return item;
  });

  ss.setData(data);
}

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

Переключение состояния доступности

Для реализации двустороннего управления (включить/выключить) применяется симметричная модификация массива:

function toggleDisabled(value, state) {
  const updated = ss.getData().map(item => {
    if (item.value === value) {
      return {
        ...item,
        disabled: state
      };
    }
    return item;
  });

  ss.setData(updated);
}

Такой подход удобен при работе с бизнес-логикой, где доступность зависит от внешних условий: прав пользователя, статуса сущности, загрузки данных.

Поведение выбранных значений при отключении

Если опция уже выбрана и затем помечается как disabled, Slim Select не всегда автоматически сбрасывает текущее значение. Поведение зависит от контекста:

  • в одиночном select значение может оставаться выбранным
  • в мультивыборе отключённые элементы перестают быть доступными для добавления, но уже выбранные могут сохраняться

Для строгого контроля состояния требуется дополнительная логика очистки:

function disableAndClear(value) {
  const data = ss.getData().map(item => {
    if (item.value === value) {
      return { ...item, disabled: true };
    }
    return item;
  });

  ss.setData(data);

  const selected = ss.getSelected();
  if (selected.includes(value)) {
    ss.setSelected(selected.filter(v => v !== value));
  }
}

Влияние на поиск и фильтрацию

Slim Select исключает отключённые элементы из интерактивного выбора, но поведение поиска зависит от конфигурации:

  • disabled-элементы могут отображаться в списке результатов поиска
  • выбор через клик или Enter для них блокируется
  • навигация клавишами пропускает такие элементы

Это позволяет сохранять контекст информации, но предотвращать взаимодействие.

Стилизация отключённых опций

Визуальное состояние управляется встроенными CSS-классами. Обычно применяется класс ss-disabled, который задаёт:

  • пониженную прозрачность
  • отсутствие hover-эффекта
  • изменение курсора

При необходимости стили можно переопределить:

.ss-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

Использование pointer-events: none усиливает блокировку взаимодействия на уровне браузера.

Условное отключение на основе логики приложения

Частый сценарий — зависимость доступности от внешнего состояния:

function buildData(userRole) {
  return [
    { text: 'Просмотр', value: 'view' },
    {
      text: 'Редактирование',
      value: 'edit',
      disabled: userRole !== 'admin'
    },
    {
      text: 'Удаление',
      value: 'delete',
      disabled: userRole !== 'admin'
    }
  ];
}

ss.setData(buildData(currentUser.role));

Такой подход позволяет декларативно описывать доступность без постобработки DOM.

Обновление состояния при внешних событиях

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

async function loadOptions() {
  const response = await fetch('/api/options');
  const items = await response.json();

  const mapped = items.map(item => ({
    text: item.name,
    value: item.id,
    disabled: !item.available
  }));

  ss.setData(mapped);
}

Состояние компонента полностью синхронизируется с серверной моделью.

Взаимодействие с множественным выбором

В режиме multiple отключённые элементы влияют только на возможность добавления новых значений. Уже выбранные элементы не становятся автоматически исключёнными, что важно учитывать при построении бизнес-логики.

const ss = new SlimSelect({
  select: '#multi',
  settings: {
    multiple: true
  },
  data: [
    { text: 'Item 1', value: '1' },
    { text: 'Item 2', value: '2', disabled: true },
    { text: 'Item 3', value: '3' }
  ]
});

Ограничения и особенности архитектуры

Модель отключения в Slim Select опирается на неизменяемость данных:

  • отсутствует прямое изменение DOM-элемента как источника истины
  • любое изменение состояния требует обновления массива data
  • UI пересобирается на основе нового состояния

Такой подход упрощает предсказуемость, но делает массовые изменения более затратными по сравнению с прямым DOM-манипулированием.

Рекомендации по проектированию состояния

  • хранить исходный набор данных отдельно от UI-слоя
  • не модифицировать объекты опций напрямую без пересоздания массива
  • синхронизировать disabled с серверным состоянием, а не только с интерфейсной логикой
  • избегать частичных обновлений без полной реконструкции данных при сложных сценариях зависимости

Массовое отключение опций

Для управления группами элементов применяется фильтрация по признаку:

function disableByCondition(conditionFn) {
  const updated = ss.getData().map(item => ({
    ...item,
    disabled: conditionFn(item)
  }));

  ss.setData(updated);
}

Это позволяет централизованно управлять доступностью без ручного перебора каждого значения по отдельности.

Оглавление