0

Quisiera pedirles ayuda con lo siguiente:

Tengo un formulario en el que inicialmente se registra una actividad y un número de colaboradores, como siguiente paso tengo que registrar información extra de cada colaborador. Para esto en un segundo formulario genero los campos según la cantidad de colaboradores registrados previamente y, para nombrar cada campo, añado el id de colaborador:

 <?php
 foreach ($filas as $row) {
 ?>

<input type="checkbox" id="<?php echo 'check'. $row['id']; ?>">
<input type="text" id="<?php echo 'nombre'. $row['id'];?>" value="<?php echo $row['nombre']; ?>">
<input type="date" id="<?php echo fecha. $row['id']; ?>" >
<select id="<?php echo 'select_transporte' . $row['id']; ?>">
<option value=" ">SELECCIONE</option>
<option value="AÉREO">AÉREO</option>
<option value="TERRESTRE">TERRESTRE</option>
<option value="MARÍTIMO">MARÍTIMO</option>
</select>
<input type="text" id="<?php echo cantidad. $row['id']; ?>">
 <?php
}
?>

El detalle es que quisiera que, cuando se desmarque el CheckBox los campos siguientes:

(relacionados a cada colaborador), se deshabiliten para que no se pueda insertar información extra del colaborador, en caso contrario al marcar el CheckBox que los campos se habiliten.

2
  • el habilitar y deshabilitar campos se efectua en javascript, no tiene que ver con php o mysql ... Commented el 24 jun. a las 18:20
  • Que has intentado???? Commented el 24 jun. a las 18:20

2 respuestas 2

0

Para poder habilitar o deshabilitar los campos de acuerdo al checkbox intenta con esto:

PHP

<?php foreach ($filas as $row): ?>
//Añadí una clase llamada cb-colab y un data-id que sería para saber que fila es
    <input type="checkbox" class="cb-colab" id="<?php echo 'check'. $row['id']; ?>" data-id="<?php echo $row['id']; ?>">  
//inicia con los campos desabilitados
    <input type="text" id="<?php echo 'nombre'. $row['id'];?>" value="<?php echo $row['nombre']; ?>" disabled> 
    <input type="date" id="<?php echo 'fecha'. $row['id']; ?>" disabled>
    <select id="<?php echo 'select_transporte' . $row['id']; ?>" disabled>
        <option value=" ">SELECCIONE</option>
        <option value="AÉREO">AÉREO</option>
        <option value="TERRESTRE">TERRESTRE</option>
        <option value="MARÍTIMO">MARÍTIMO</option>
    </select>
    <input type="text" id="<?php echo 'cantidad'. $row['id']; ?>" disabled>
<?php endforeach; ?>

Y el JavaScript:

<script>
document.addEventListener('DOMContentLoaded', function () { //Esperas a que el DOM este cargado completamente
    var checkboxes = document.querySelectorAll('.cb-colab'); //obtienes todos los checkboxes con la clase cb-colab

    checkboxes.forEach(function(checkbox) { // por cada checkbox
        checkbox.addEventListener('change', function() { // añade el atributo onchange
            var id = this.getAttribute('data-id'); //obtiene el numero de fila
            var campos = document.querySelectorAll(`#nombre${id}, #fecha${id}, #select_transporte${id}, #cantidad${id}`); //obtiene todos los campos relacionados a ese id
            campos.forEach(function(campo) { //por cada campo
                campo.disabled = !checkbox.checked; //si el checkbox no está activo los deshabilita los campos (solo del id que se obtuvo de data-id)
            });
        });
    });
});
</script>
1
  • 1
    Funciona como quería, muchas gracias por la ayuda
    – LeX
    Commented el 24 jun. a las 18:52
0

Para poder hacer lo que tu quieres puedes utilizar este ejemplo (que ya te incluye el JavasCript):

<?php
foreach ($filas as $row) {
?>

<input type="checkbox" id="<?php echo 'check'. $row['id']; ?>" onchange="toggleFields('<?php echo $row['id']; ?>')">
<input type="text" id="<?php echo 'nombre'. $row['id'];?>" value="<?php echo $row['nombre']; ?>">
<input type="date" id="<?php echo 'fecha'. $row['id']; ?>" >
<select id="<?php echo 'select_transporte' . $row['id']; ?>">
    <option value=" ">SELECCIONE</option>
    <option value="AÉREO">AÉREO</option>
    <option value="TERRESTRE">TERRESTRE</option>
    <option value="MARÍTIMO">MARÍTIMO</option>
</select>
<input type="text" id="<?php echo 'cantidad'. $row['id']; ?>">

<script>
function toggleFields(id) {
    var checkbox = document.getElementById('check' + id);
    var nombre = document.getElementById('nombre' + id);
    var fecha = document.getElementById('fecha' + id);
    var selectTransporte = document.getElementById('select_transporte' + id);
    var cantidad = document.getElementById('cantidad' + id);

    var fields = [nombre, fecha, selectTransporte, cantidad];

    fields.forEach(function(field) {
        field.disabled = !checkbox.checked;
    });
}
</script>

<?php
}
?>

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.