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

В библиотеке SweetAlert можно легко создавать модальные окна с различными кнопками для взаимодействия с пользователем. Одним из часто встречающихся требований является возможность отключать кнопки в момент их отображения или во время взаимодействия с ними. Этот функционал полезен в различных случаях, например, когда необходимо предотвратить многократный клик на кнопку или заблокировать взаимодействие с пользователем до выполнения определённых действий.

Отключение кнопок с помощью параметра disabled

Для того чтобы отключить кнопку в модальном окне SweetAlert, используется параметр disabled. Его можно применить как к стандартной кнопке, так и к кнопке, которая задаётся вручную. Рассмотрим базовый пример, где мы отключаем кнопку подтверждения:

Swal.fire({
  title: 'Подтверждение',
  text: 'Вы уверены?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет',
  confirmButtonDisabled: true,  // Отключаем кнопку "Да"
  cancelButtonDisabled: false  // Кнопка "Нет" активна
});

В этом примере кнопка «Да» будет изначально отключена, а кнопка «Нет» останется активной. Для отключения кнопки нужно просто установить соответствующее значение в true для параметров confirmButtonDisabled или cancelButtonDisabled.

Динамическое отключение кнопок

Иногда возникает необходимость в динамическом изменении состояния кнопок в зависимости от действий пользователя или результата какого-либо асинхронного процесса. Для этого можно использовать метод Swal.getConfirmButton() или Swal.getCancelButton(), чтобы изменить состояние кнопок после их инициализации. Например:

Swal.fire({
  title: 'Загрузка...',
  text: 'Пожалуйста, подождите',
  didOpen: () => {
    Swal.showLoading(); // Показываем индикатор загрузки
  },
  allowOutsideClick: false,  // Отключаем клик вне окна
  showCancelButton: true,
  confirmButtonText: 'Ок',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.dismiss === Swal.DismissReason.cancel) {
    // Логика при отмене
  }
});

// Пример динамического отключения кнопки
setTimeout(() => {
  Swal.getConfirmButton().disabled = true;  // Отключаем кнопку после 3 секунд
}, 3000);

В этом примере окно SweetAlert изначально отображает две кнопки — «Ок» и «Отмена». Через 3 секунды, после выполнения некоторой логики, кнопка «Ок» будет отключена. Такое поведение может быть полезно, например, когда нужно предотвратить повторное нажатие на кнопку до завершения какого-либо процесса.

Использование асинхронных операций для управления кнопками

Для динамического отключения кнопок часто используются асинхронные операции, например, HTTP-запросы или таймеры. В этом случае можно работать с кнопками после завершения операции. Например:

async function fetchData() {
  const swal = await Swal.fire({
    title: 'Загрузка данных...',
    text: 'Пожалуйста, подождите.',
    showCancelButton: true,
    confirmButtonText: 'Ок',
    cancelButtonText: 'Отмена',
    allowOutsideClick: false
  });

  setTimeout(() => {
    swal.getConfirmButton().disabled = false; // Включаем кнопку после завершения загрузки
    swal.getCancelButton().disabled = false; // Включаем кнопку "Отмена"
  }, 5000);
}

fetchData();

Здесь асинхронная функция fetchData() имитирует процесс загрузки данных, после чего кнопки становятся активными. Можно также в зависимости от результата запроса включать или отключать кнопки.

Отключение кнопок с учётом состояния модального окна

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

Пример использования логического флага для блокировки кнопок:

let isDataValid = false;

Swal.fire({
  title: 'Ввод данных',
  text: 'Пожалуйста, введите правильные данные.',
  input: 'text',
  inputPlaceholder: 'Введите текст',
  confirmButtonText: 'Подтвердить',
  cancelButtonText: 'Отмена',
  showCancelButton: true,
  confirmButtonDisabled: !isDataValid  // Кнопка подтверждения отключена при неправильных данных
});

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

Примечания

  1. Параметры кнопок: SweetAlert предоставляет несколько параметров для настройки состояния кнопок: confirmButtonDisabled, cancelButtonDisabled, а также методы для получения конкретных кнопок через Swal.getConfirmButton() и Swal.getCancelButton().

  2. Доступность интерфейса: Не стоит забывать, что отключение кнопок может повлиять на доступность интерфейса. Важно всегда учитывать пользователей, использующих клавиатуру и экранные читалки. Для улучшения доступности можно добавить атрибуты aria-disabled для кнопок, чтобы экранные читалки правильно интерпретировали их состояние.

  3. Асинхронность: При работе с асинхронными операциями необходимо учитывать, что состояние кнопок должно обновляться только после завершения всех необходимых операций. Это особенно важно, когда интерфейс взаимодействует с сервером или сторонними API.

  4. Предотвращение многократного клика: Если целью является предотвращение многократного клика на кнопку, то можно использовать как отключение кнопки после первого клика, так и обработку её состояния внутри обработчика событий.

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

Оглавление