TransWikia.com

Activar Select Box segun checkbox seleccionado

Stack Overflow en español Asked by maha1982 on November 7, 2021

Teniendo esto:

introducir la descripción de la imagen aquí

Necesito que los select box Centro Costo, esten disabled y que se activen solo cuando el checkbox de su sea clickeado independiente de que el usuario elija o no una opcion al habilitarse el select box. 

<form method="post" id="form">
 <table id="listado" class="table table-hover table-bordered table-condensed">
  <thead>
   <tr>
    <th><i class="fa fa-check"></i>&nbsp;SEL</th>
     <th>N° SOL</th>
     <th>FOLIO</th>
     <th>PRODUCTO</th>
     <th>CANT.</th>
     <th>CENTRO COSTO</th>
     <th>AUTORIZADO POR</th>
     <th>F. SOLICITUD</th>
     <th>F. AUTORIZACION</th>
     <th>ESTADO INTERNO</th>
     <th>ESTADO GENERAL</th>
    </tr>
   </thead>
   <tbody>
    <?php
     $conexion->set_charset("utf8");
     $consulta = "SELECT

      sm.id AS id_sol,
      sm.correlativo,
      sm.ids,
      sb.id AS id_sb,
      tr.nombre AS autorizado_por,
      sb.fecha_sol,
      sm.fecha_autorizacion,
      sm.producto,
      sm.cantidad,
      sb.estado

      FROM sol_maestranza sm

      INNER JOIN trabajadores tr ON tr.id = sm.autorizado_por
      LEFT JOIN salida_bodega sb ON sb.id = sm.ids

      WHERE sb.id_cl = '$id_cl' AND sb.estado = 'E' AND sm.estado_sol = 'S';
      $resultado = $conexion->query($consulta);
      if ($resultado->num_rows > 0){
       while ($row = $resultado->fetch_array()) {
        if($row['estado'] == 'E'){
         $est_int = "APROBADO";
        }else{
         $est_int = 'EN ESPERA';
        }
       ?>
       <tr>
        <td align="center"><input type="checkbox" name="sel[]" class="flat-red" value="<?=$row['id_sol']?>" ></td>
        <td><?=$row['ids']?></td>
        <td><?=$row['correlativo']; ?></td>
        <td><?=strtoupper($row['producto'])?></td>
        <td><?=$row['cantidad']; ?></td>
        <td width="13%">
         <select class="form-control" style="margin: 0 !important; padding: 0 !important; width:100%" name="cci[]" required >
          <option value='' selected='selected' disabled>SELECCIONE OPCION</option>
          <?php foreach (array_combine($id_c, $nom_c) as $val1 => $val2){?>
          <option value="<?=$val1?>"><?=strtoupper($val2)?></option>
          <?php } ?>
          </select>
          </td>
          <td><?=strtoupper($row['autorizado_por']) ?></td>
          <td><?=DateTime::createFromFormat('Y-m-d',$row['fecha_sol'])->format('d/m/Y')?></td>
          <td><?=DateTime::createFromFormat('Y-m-d',$row['fecha_sol'])->format('d/m/Y')?></td>
          <td><?=$est_int ?></td>
          <td><?=$est_int?></td>
         </tr>
        <?php } } ?>

       </tbody>
      </table>
      <div class="modal-footer">
      <h3 class="box-title"><a href="myModal" data-toggle="modal" class="btn btn-success" data-target="#finaliza">CREAR ORDEN DE COMPRA</a></h3>
       </div>

    </form>

El como los envio (A una ventana Modal): 

$('#finaliza').on('show.bs.modal', function(e) {

var $modal = $(this);

$.ajax({
 cache: false,
 type: 'POST',
 url: 'finaliza_oc.php',
 data: {'sel': JSON.stringify($('[name="sel[]"]').serializeArray()), 'cci': JSON.stringify($('[name="cci[]"]').serializeArray())
},
success: function(data) {
 $modal.find('.edit-content').html(data);
}
});
})

Y los recibo y proceso asi: 

$obj = json_decode($_POST["sel"],true);
//PARA LOS IDS DE LOS CHEXKBOX SELECCIONADOS
foreach ($obj as $k){
 echo $k['value']; echo "<br>";
}

//PARA LOS SELECT BOX SELECCIONADOS
$obj = json_decode($_POST["cci"],true);

foreach ($obj as $k){
 echo $k['value']; echo "<br>";
}

Agradezco cualquier ayuda u orientacion al respecto.
Saludos.

ajaxmysqlphptable

2 Answers

En lugar de enviar los checkbox con JSON.stringify($('[name="sel[]"]').serializeArray() es necesario obtener todos los que están marcados e irlos agregando a un arreglo simple, solo con sus valores. Esto también servirá para buscar el valor de los select, asegurar que se seleccionó una opción y agregarlos también a su respectivo arreglo.

$('#finaliza').on('show.bs.modal', function(e) {
  // ¿Qué uso le das a estas dos variables?
  var $modal = $(this),
  idp = e.relatedTarget.id;

  // Inicializar arreglos para checkbox y select
  let ids = [];
  let sels = [];
  let incompleto = false;

  // Recorrer solo los checkbox marcados
  $('[name="sel[]"]:checked').each(function(i, chk) {
    // Agregar ID del checkbox
    ids.push($(chk).val());
    // Obtener valor del select:
    // -- A partir del checkbox obtener la fila
    // -- Desde la fila, buscar select por etiqueta (no tiene nombre)
    let value = parseInt($(chk).closest('tr').find('select').val());
    if(value) {
      // Agregar valor del select
      sels.push(value);
    } else {
      incompleto = true;
    }
  });
  console.log(ids, sels);
  if(incompleto) {
      // El select es requerido, no puede tener valor cero
      alert('Selecciona centro de costo para todas las filas marcadas');
      return false;
  }

  $.ajax({
    cache: false,
    type: 'POST',
    url: 'finaliza_oc.php',
    data: {
      'ids': JSON.stringify(ids),
      'sels': JSON.stringify(sels)
    },
    success: function(data) {
      $modal.find('.edit-content').html(data);
    }
  });
});

En PHP los recibirás en dos arreglos:

<?php
var_dump($_POST);
// ids => array(id1, id2, ... idX);
// sels => array(sel1, sel2, ... selX);


$("#probar").on('click', function() {
  // Inicializar arreglos para checkbox y select
  let ids = [];
  let sels = [];
  let incompleto = false;

  // Recorrer solo los checkbox marcados
  $('[name="sel[]"]:checked').each(function(i, chk) {
    // Agregar ID del checkbox
    ids.push($(chk).val());
    // Obtener valor del select:
    // -- A partir del checkbox obtener la fila
    // -- Desde la fila, buscar select por etiqueta (no tiene nombre)
    let value = parseInt($(chk).closest('tr').find('select').val());
    if(value) {
      // Agregar valor del select
      sels.push(value);
    } else {
      incompleto = true;
    }
  });
  console.log(ids, sels);
  if(incompleto) {
      // El select es requerido, no puede tener valor cero
      alert('Selecciona centro de costo para todas las filas marcadas');
      return false;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
      <tr>
        <td align="center"><input type="checkbox" name="sel[]" class="flat-red" value="1"></td>
        <td>1</td>
        <td>Producto 1</td>
        <td><select class="form-control" name="cci[]" required >
          <option value='' selected='selected' disabled>SELECCIONE OPCION</option>
          <option value="1">Centro 1</option>
          <option value="2">Centro 2</option>
        </select></td>
      </tr>
      <tr>
        <td align="center"><input type="checkbox" name="sel[]" class="flat-red" value="2"></td>
        <td>2</td>
        <td>Producto 2</td>
        <td><select class="form-control" name="cci[]" required >
          <option value='' selected='selected' disabled>SELECCIONE OPCION</option>
          <option value="1">Centro 1</option>
          <option value="2">Centro 2</option>
        </select></td>
      </tr>
      <tr>
        <td align="center"><input type="checkbox" name="sel[]" class="flat-red" value="3"></td>
        <td>3</td>
        <td>Producto 3</td>
        <td><select class="form-control" name="cci[]" required >
          <option value='' selected='selected' disabled>SELECCIONE OPCION</option>
          <option value="1">Centro 1</option>
          <option value="2">Centro 2</option>
        </select></td>
      </tr>
</table>
<button id="probar">Probar</button>

Answered by Triby on November 7, 2021

Lo primero que debes saber es que cada item debe ter un id que se proporciona al desplegar los datos desde la consulta en php es decir algo como esto

<input  value="<?php echo $persona["id"];?>"  id="id-<?php echo $persona["id"];?>">

y el el ajax identificar al dar click ese id de esta forma

<script>
       $("#id-"+<?php echo $persona["id"];?>).click(function(e){
            e.preventDefault();
id = document.getElementById("id-"+<?php echo $persona["id"];?>).value//obtener valor del input o del select dinamico
                               
                                       var url = "enviar-id.php";
                                       $.ajax({
                                          type: "POST",
                                          url: url,
                                         
                                          data:{id:id},
                                          success: function(data)
                                 {
                                                                     
                                 var datos = (data);
                                                                
                                if (data == "ok") { }
                                                                            
                                if (data == "no") { } 
                                     
                              }
                           });

                               });
</script>

pero todo eso debe ir dentro del while para asi poder asignarle un id dinámico a la tabla

 while ($row = $resultado->fetch_array()) {

Answered by juan perez on November 7, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP