Cambio de casilla de verificación de jQuery y evento de clic

$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));

  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>

Expandir fragmento

Aquí .change()se actualiza el valor del cuadro de texto con el estado de la casilla de verificación. Lo uso .click()para confirmar la acción al desmarcar. Si el usuario selecciona cancelar, la marca de verificación se restaura pero.change() se activa antes de la confirmación.

Esto deja las cosas en un estado inconsistente y el cuadro de texto dice falso cuando la casilla de verificación está marcada.

¿Cómo puedo gestionar la cancelación y mantener el valor del cuadro de texto coherente con el estado del cheque?

Aug 12 '11 01:08 Professor Chaos

Probado en JSFiddle y hace lo que usted solicita. Este enfoque tiene el beneficio adicional de activarse cuando se hace clic en una etiqueta asociada con una casilla de verificación.

Respuesta actualizada:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

Respuesta original:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});

Aug 11 '2011 19:08 kasdega

Manifestación

Usarmousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});

Aug 11 '2011 18:08 Joseph Marikle

La mayoría de las respuestas no lo captarán (presumiblemente) si usa <label for="cbId">cb name</label>. Esto significa que cuando haga clic en la etiqueta, marcará la casilla en lugar de hacer clic directamente en la casilla de verificación. (No es exactamente la pregunta, pero aquí tienden a aparecer varios resultados de búsqueda)

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

En cuyo caso podrías utilizar:

Earlier versions of jQuery:

$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Ejemplo de JSFiddle con jQuery 1.6.4

jQuery 1.7+

$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Ejemplo de JSFiddle con el último jQuery 2.x

Se agregaron ejemplos de jsfiddle y el html con la etiqueta de casilla de verificación en la que se puede hacer clic.

Feb 13 '2013 06:02 lko

Bueno... sólo para ahorrarme un dolor de cabeza (aquí es pasada la medianoche), se me ocurre:

$('#checkbox1').click(function() {
  if (!$(this).is(':checked')) {
    var ans = confirm("Are you sure?");
     $('#textbox1').val(ans);
  }
});

Espero eso ayude

Aug 11 '2011 18:08 zarun