Не правильно отображается состояние чекбокса с использования плагина i-Check

Question

Первый раз работаю с i-Check, вот описание плагина: https://github.com/drgullin/icheck.

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

вот код :

let rollback = false;

$('#check-expert-mode').on('ifChecked', function(event) {
  if (rollback) {
    alert('Если мы сюда зашли значит вернули состояние чекбокса');
    rollback = false;
  } else {
    let result = confirm('Включить экспертный режим?\nЧтобы применить изменения, обновите страницу.');

    if (result) {
    document.cookie = 'use_expert_mode=on';
    } else {
      rollback = true;
      $('#check-expert-mode').iCheck('uncheck'); // Отменяем выбор чекбокса
    }
  }
});

$('#check-expert-mode').on('ifUnchecked', function(event) {
  if (rollback) {
    alert('Если мы сюда зашли значит вернули состояние чекбокса');
    rollback = false;
  } else {
    let result = confirm('Выключить экспертный режим?\nЧтобы применить изменения, обновите страницу.');

    if (result) {
document.cookie = 'use_expert_mode=off';
    } else {
      rollback = true;
      $('#check-expert-mode').iCheck('check'); // Возвращаем чекбокс в исходное состояние
    }
  }
});

<input type="checkbox" id="check-expert-mode" <?php if(!empty($_COOKIE['use_expert_mode']) && $_COOKIE['use_expert_mode']=="on") echo 'checked'; ?>>
<label class="form-check-label" for="check-expert-mode">Экспертный режим</label>

Answer 1

Один из вариантов решения вашей задачи без jQuery и плагинов

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

const input = document.getElementById('check-expert-mode');

input.addEventListener('click', (event) => {
  event.preventDefault();
  setTimeout(() => {
    const res = confirm(`${input.checked ? 'Выключить' : 'Включить'} экспертный режим?`);
    if (res) {
      //document.cookie = `use_expert_mode=${res === !input.checked ? 'on' : 'off'}`;
      console.log(`use_expert_mode=${res === !input.checked ? 'on' : 'off'}`);
      input.checked = res === !input.checked
    }
  }, 50);
});

<input type="checkbox" id="check-expert-mode" />
<label class="form-check-label" for="check-expert-mode">Экспертный режим</label>

БЛОГ НА HUSL

Не правильно отображается состояние чекбокса с использования плагина i-Check

Ответы (1 шт):