0

Intentaré explicarlo de la manera más clara; Necesito que al activar mi checkbox este se desactive o se ponga en solo lectura y también guardar ese proceso, para que el refrescar o cerrar la página no tenga que volver a activarlo, hasta el momento guardo la selección del checkbox con localStorage, el detalle que puedo volver a deseleccionar el checkbox y ya no sirve de nada el código, en mi caso no es problema ya que se que no debo picarle de nuevo, tengo otro código para desactivarlo una vez haga la selección, el detalle que si le pico de nuevo, mando una alerta y aunque le diga que no mi otro código toma ese clic como una deseleccion y ya no guarda la selección qué hice, abajo dejo el código para guardar la selección y el otro que bloquea el checkbox.

<script>
(function() {

  var cbstate;
   window.addEventListener('load', function() {
 
    cbstate = JSON.parse(localStorage['CBState'] || '{}');
  
    for(var i in cbstate) {
      var el = document.querySelector('input[name="' + i + '"]');
      if (el) el.checked = true;
    }
  
    var cb = document.getElementsByClassName('save-cb-state');
  
    for(var i = 0; i < cb.length; i++) {
       cb[i].addEventListener('click', function(evt) {
    
        if (this.checked) {
          cbstate[this.name] = true;
        }
    
        else if (cbstate[this.name]) {
          delete cbstate[this.name];
        }
    
        localStorage.CBState = JSON.stringify(cbstate);
      });
    }
  });
})();
</script>

<script>
$("#test").on('change', function() {
    this.checked=!this.checked?!confirm():true;
});</script>
2
  • Publicá el código HTML. Sería ideal que tu ejemplo se pudiera probar desde acá. Probá editar tu pregunta y agregar el código como un fragmento.
    – azeós
    Commented el 21 jun. 2020 a las 3:50
  • listo, hasta abajo está y ahí hay otro detalle, pero primero lo primero @azeós
    – miiwtwo
    Commented el 21 jun. 2020 a las 4:00

1 respuesta 1

0

Lo que entiendo que estas pidiendo es una funcion de una unica accion, para ello no te recomiendo que lo hagas desde el localstorage ya que es memoria volatil si el usuario borra datos de navegacion, deberias mejor almacenarlo en una BD para tener mas seguridad de los datos.

Sin embargo para lo que pide se me ocurre algo como lo siguiente

<input type="checkbox" name="check" id="box" onclick="clicked(this)">
<script>
function clicked(checkBox){        
    localStorage.setItem('state', checkBox.checked);
    checkBox.disabled = true;
}

function getState(){
    let state = localStorage.getItem('state');
    if(!state){
        return;
    }
    let checkBox = document.querySelector("#box");
    checkBox.checked = state;
    checkBox.disabled = true;

}

getState()

Este segmento de codigo consta de dos funciones, la primera recibe el evento onClick y obtiene la información del checkbox y la almacena en el localstorage ademas de desactivar tu checkbox esta funcion solo se ejecuta si el checkbox esta activado en caso contrario se omite, en la segunda funcion se recupera la variable del localstorage si existe entonces se sale de la funcion en caso contrario setea el valor y desactiva el checkbox espero que te funcione.

Edicion

Para almacenar la informacion en una base de datos mysql con php desde una vista se puede hacer mas o menos de la siguiente manera, hay que considerar que se necesita jquery para esta acción ya que hace uso de ajax

function clicked(checkBox){        
    $.ajax({
       url: 'route/saveState.php',
       type: "POST",
       data: {state: checkBox.checked},       
       success: function (data) {  
           checkBox.disabled = true;
       },
       error: function (data) { alert(data.responseText); }
}

function getState(){
    $.ajax({
       url: 'route/getState.php',
       type: "POST",
       dataType: "json",
       success: function (data) {  
           let error = data.error;
           if(error){
              return;
           }
           let checkBox = document.querySelector("#box");
           checkBox.checked = data.state;
           checkBox.disabled = true;
       },
       error: function (data) { alert(data.responseText); }
}

getState()

Con eso se almacena y se consulta mediante ajax a un par de archivos de php nada mas haciendo el codigo correspondiente

10
  • lo pruebo y te notifico @ivan !!!! te diré que probé borrando caché (no cookies), apagando el PC y no se quitó la selección usando localStorage, eso hablando del primer código y sin usar el segundo y claro, omitiendo los detalles que buscó eliminar. Por cierto, cómo lo harías con Bd, ya que no se inserta ningún dato, bueno, creo
    – miiwtwo
    Commented el 21 jun. 2020 a las 11:59
  • Depende de que estés usando, ¿Usas php? ¿Usas node? Commented el 21 jun. 2020 a las 22:42
  • php utilizo @ivan
    – miiwtwo
    Commented el 22 jun. 2020 a las 0:11
  • Acabo de editar Commented el 22 jun. 2020 a las 4:26
  • de acuerdo @ivan!!! , hoy pruebo todo, solo una cosa, ¿los archivos php que llevan?, porque nunca he guardado un state o vista, ahí si es mi primera vez 😮
    – miiwtwo
    Commented el 22 jun. 2020 a las 11:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.