Skip to main content
Mejora de respuesta
Origen Enlace
PsychoMx
  • 1
  • 3
  • 18

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>
<?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>

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>
Origen Enlace
PsychoMx
  • 1
  • 3
  • 18

<?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>