How to make SweetAlert2 cancel the click on a checkbox?

It is correct to return true | falseto cancel the user action.

However, when you use javascript asynchronously ( swal({}).then((...)=>{})), you should be aware that the browser is executing your handler as a regular function, () => {}not an asynchronous function async () => {}.

So even still declaring the handler as an asynchronous function, and using the await. The browser would not expect this behavior and you would not be able to return the desired value.

To try to explain it better, I leave you a lab with async / await syntax for the Promiseswal one.

This fragment is just a lab

In it you will be able to appreciate how the handler assigned to the event constantly returns a positive value for a logical operation, destroying any reaction of the user to cancel his action.

// fn guardar
guardar = () => {}

// async fn handler
handler = async function (e) {
  console.log('[Handler] Lanzamos swal, esperamos respuesta del usuario');
  console.log('[Handler]' + new Date());
	var r = await swal({
	    title: 'Seleccionado',
	    text: "¿Está seguro que desea seleccionarlo?",
	    type: 'warning',
	    showCancelButton: true,
	    confirmButtonColor: '#3085d6',
	    cancelButtonColor: '#d33',
	    confirmButtonText: 'Si',
	    cancelButtonText: 'No'
	});
  console.log('[Handler] ¡Gracias por la respuesta!');
  console.log(r);
  console.log('[Handler] ' + new Date());
  if (r.value) {
    guardar(true);
    return true;
  } else {
    return false;
 	}
}

// Ejecutamos el manejador como una función regular
console.log('[Lab] Ejecutamos nuestro manejador como una función regular, de la misma forma que lo realizará el navegador');
console.log('[Lab] Nuestro manajador siempre retornará (exp) [' + (handler() ? 'true' : 'false') + '] si es llamada como una función regular. Y no podremos retornal el valor real');


// Lo mismo ocurre cuando es el navegador quien lo ejecuta a través de el evento 'click' de cualquier elemento
$('input[name="test"]').click( handler );

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="test" />

a possible answer

On the other hand, there are different ways to achieve the proposed operation.

In the following solution we will keep the syntax swal({}).then(...){}to achieve asynchronous operation, performing a double check through the custom property data-sure.

Our handler will return falseto avoid changing the state of our checkbox and display the component swalto the user.

When swalthe resolved promise returns, we will evaluate the result.

With an affirmative result, we will mark data-surea trueand re-execute the 'click' event handler programmatically.

If it checkboxcontains the custom property data-sureor, failing that, it was already 'marked' by the user. We will allow the action return true.

See in operation

// fn guardar
guardar = () => {}

// fn handler
handler = function(e) {

  // checkbox
  var checkbox = $(this);
  
  // sure?
  if ( checkbox.attr('data-sure') || !checkbox.prop('checked') ) {
    checkbox.removeAttr('data-sure');
    return true;
  }

  //swal
	swal({
	    title: 'Seleccionado',
	    text: "¿Está seguro que desea seleccionarlo?",
	    type: 'warning',
	    showCancelButton: true,
	    confirmButtonColor: '#3085d6',
	    cancelButtonColor: '#d33',
	    confirmButtonText: 'Si',
	    cancelButtonText: 'No'
	}).then(function(r) {
      console.log(checkbox);
      if(r.value){
          checkbox.attr('data-sure',true);
          checkbox.click();
      }
  });
  
  // Siempre retornamos false
  return false;
}

// Anclamos el manejador al evento
$('input[name="test"]').click( handler );

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="test" />

I hope it will be useful =)

welcome to stackoverflow