2

pose el siguiente codigo:

<!-- MODA PLAN DE ACCION -->
<div class="modal fade modal-default" id="modalPlanAccion">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-window-close"></i></button>
                <h4 class="modal-title"><span class="badge bg-green" id="span_plan_accion"></span></h4>
            </div>
            <div class="modal-body">
                <form action="" role="form" id="formSac" autocomplete="off">
                <input type="hidden" id="idSac">
                <input type="hidden" id="accion">
                <div class="form-group">
                    <label for="planAccion" class="value_required">Plan de Acción</label>
                    <textarea name="planAccion" id="" rows="3" class="form-control"></textarea>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="checkbox">
                            <label for="recursoHumano">
                                <input type="checkbox" id="recursoHumano" name="recursoHumano">Recurso Humano
                            </label>
                        </div>
                    </div>
                    <div class="col-md-3" style="display:none;" id="div_humano">
                        <div class="form-group">
                            <label for="detalleRecursoHumano" class="value_required">Detalle</label>
                            <input type="text" name="detalleRecursoHumano" id="detalleRecursoHumano" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="checkbox">
                            <label for="recursoTecnico">
                                <input type="checkbox" id="recursoTecnico" name="recursoTecnico">Recurso Tecnico
                            </label>
                        </div>
                    </div>
                    <div class="col-md-3" style="display:none;" id="div_tecnico">
                        <div class="form-group">
                            <label for="detalleRecursoTecnico" class="value_required">Detalle</label>
                            <input type="text" name="detalleRecursoTecnico" id="detalleRecursoTecnico" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="checkbox">
                            <label for="recursoFinanciero">
                                <input type="checkbox" id="recursoFinanciero" name="recursoFinanciero">Recurso Financiero
                            </label>
                        </div>
                    </div>
                    <div class="col-md-3" style="display:none;" id="div_financiero">
                        <div class="form-group">
                            <label for="detalleRecursoFinanciero" class="value_required">Detalle</label>
                            <input type="text" name="detalleRecursoFinanciero" id="detalleRecursoFinanciero" class="form-control">
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-info btn-xs" onclick="agregarFila();"><i class="fa fa-plus-square-o"></i> Agregar Fila</button>

                <!-- GRID PLAN ACCION -->
                <table id="grid_plan_accion"></table>
                <div id="pager_plan_accion"></div>

                <div class="row">
                    <div class="col-md-4">
                        <label style="color:red;">*Campos Obligatorios </label>
                    </div>
                </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="confirmarGrabarplanAccion();">
                    <i class="fa fa-check-square-o">&nbsp;Grabar Datos</i>
                </button>
                <!-- pull-left determina posicion-->
                <button type="button" class="btn btn-danger " data-dismiss="modal">
                    <i class="fa fa-close">&nbsp; Salir</i> 
                </button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

dicho código genera la siguiente vista(modal):

introducir la descripción de la imagen aquí ahora cuestion es que ocupa demasiado espacio la parte de checkbox como podria mejorar o optimar/aprovechar los espacios.

Al hacer click en un checkbox muestra un input y asi con cualquiera de ellos agradezco cualquier sugerencia.

UPDATE de esta manera muestro los input:

$("#modalPlanAccion #recursoHumano").click(function(){
    if ($('#modalPlanAccion #recursoHumano').is(':checked')) {
        $("#div_humano").show();
    }else{
        $("#detalleRecursoHumano").val(null);
        $("#div_humano").hide();
    }

});

$("#modalPlanAccion #recursoTecnico").click(function(){
    if ($('#modalPlanAccion #recursoTecnico').is(':checked')) {
        $("#div_tecnico").show();
    }else{
        $("#detalleRecursoTecnico").val(null);
        $("#div_tecnico").hide();
    }
});

$("#modalPlanAccion #recursoFinanciero").click(function(){
    if ($('#modalPlanAccion #recursoFinanciero').is(':checked')) {
        $("#div_financiero").show();
    }else{
        $("#detalleRecursoFinanciero").val(null);
        $("#div_financiero").hide();
    }
});
10
  • ¿Te refieres al checkbox de recurso humano? ¿cuál es el resultado esperado?
    – Shaz
    el 23 mar. 2019 a las 12:18
  • @Shaz si me refiero a ese msmo, una forma donde puedan quedar todos los tres checkbox al mismo nivel alineados el 23 mar. 2019 a las 13:24
  • ¿qué te impide poner el checkbox de recurso financiero en la misma línea de los otros dos?
    – Shaz
    el 23 mar. 2019 a las 13:53
  • en un inicio estuvo alli pero no caben los tres juntos dado que cada uno tiene que mostrar un input y dicho input debe ser tamaño "col-md-3" y los checkbox no qudan bien con "col-md-1" ni "2".. el 23 mar. 2019 a las 14:08
  • Me gustaría ver la función que muestra los input en función al checkbox que seleccione, para trabajar en caliente. el 23 mar. 2019 a las 14:59

1 respuesta 1

4

Esto es lo que te propongo, dejas las 3 columnas que incluyen los recursos con la clase col-md-4 lo que nos daría un total de uso de 12 columnas, es decir, todas en la misma fila.

Luego dentro de cada una de estas columnas de recurso, incluyo las dos columnas (los checkbox y los input, cada una con la clase col-md-12, esto fuerza a que se rompa el diseño y obliga la columna del input a posicionarse una fila por debajo.

$("#modalPlanAccion #recursoHumano").click(function(){
    if ($('#modalPlanAccion #recursoHumano').is(':checked')) {
        $("#div_humano").show();
    }else{
        $("#detalleRecursoHumano").val(null);
        $("#div_humano").hide();
    }

});

$("#modalPlanAccion #recursoTecnico").click(function(){
    if ($('#modalPlanAccion #recursoTecnico').is(':checked')) {
        $("#div_tecnico").show();
    }else{
        $("#detalleRecursoTecnico").val(null);
        $("#div_tecnico").hide();
    }
});

$("#modalPlanAccion #recursoFinanciero").click(function(){
    if ($('#modalPlanAccion #recursoFinanciero').is(':checked')) {
        $("#div_financiero").show();
    }else{
        $("#detalleRecursoFinanciero").val(null);
        $("#div_financiero").hide();
    }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalPlanAccion">
  Launch modal
</button>


<!-- MODA PLAN DE ACCION -->
<div class="modal fade modal-default" id="modalPlanAccion">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-window-close"></i></button>
        <h4 class="modal-title"><span class="badge bg-green" id="span_plan_accion"></span></h4>
      </div>
      <div class="modal-body">
        <form action="" role="form" id="formSac" autocomplete="off">
          <input type="hidden" id="idSac">
          <input type="hidden" id="accion">
          <div class="form-group">
            <label for="planAccion" class="value_required">Plan de Acción</label>
            <textarea name="planAccion" id="" rows="3" class="form-control"></textarea>
          </div>

          <div class="row"><!-- row principal que contiene las tres columnas de recursos-->

            <div class="col-md-4"><!-- Columna 1/3 -->

              <div class="col-md-12">
                <div class="checkbox">
                  <label for="recursoHumano">
                                <input type="checkbox" id="recursoHumano" name="recursoHumano">Recurso Humano
                            </label>
                </div>
              </div>

              <div class="col-md-12" style="display:none;" id="div_humano">
                <div class="form-group">
                  <label for="detalleRecursoHumano" class="value_required">Detalle</label>
                  <input type="text" name="detalleRecursoHumano" id="detalleRecursoHumano" class="form-control">
                </div>
              </div>

            </div><!--cierre 1/3-->

            <div class=col-md-4><!-- col 2/3-->

              <div class="col-md-12">
                <div class="checkbox">
                  <label for="recursoTecnico">
                                <input type="checkbox" id="recursoTecnico" name="recursoTecnico">Recurso Tecnico
                            </label>
                </div>
              </div>

              <div class="col-md-12" style="display:none;" id="div_tecnico">
                <div class="form-group">
                  <label for="detalleRecursoTecnico" class="value_required">Detalle</label>
                  <input type="text" name="detalleRecursoTecnico" id="detalleRecursoTecnico" class="form-control">
                </div>
              </div>

            </div><!-- cierre 2/3-->

            <div class="col-md-4"><!-- col 3/3-->

              <div class="col-md-12">
                <div class="checkbox">
                  <label for="recursoFinanciero">
                                <input type="checkbox" id="recursoFinanciero" name="recursoFinanciero">Recurso Financiero
                            </label>
                </div>
              </div>

              <div class="col-md-12" style="display:none;" id="div_financiero">
                <div class="form-group">
                  <label for="detalleRecursoFinanciero" class="value_required">Detalle</label>
                  <input type="text" name="detalleRecursoFinanciero" id="detalleRecursoFinanciero" class="form-control">
                </div>
              </div>


            </div><!-- cierre 3/3 -->

          </div><!-- cierre row principal-->


          <button type="button" class="btn btn-info btn-xs" onclick="agregarFila();"><i class="fa fa-plus-square-o"></i> Agregar Fila</button>

          <!-- GRID PLAN ACCION -->
          <table id="grid_plan_accion"></table>
          <div id="pager_plan_accion"></div>

          <div class="row">
            <div class="col-md-4">
              <label style="color:red;">*Campos Obligatorios </label>
            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="confirmarGrabarplanAccion();">
                    <i class="fa fa-check-square-o">&nbsp;Grabar Datos</i>
                </button>
        <!-- pull-left determina posicion-->
        <button type="button" class="btn btn-danger " data-dismiss="modal">
                    <i class="fa fa-close">&nbsp; Salir</i> 
                </button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Nota:

Una solución más natural es usar offsets en las columnas de los input, pero para esto es necesario que sólo se pudiese seleccionar un checkbox.

Tu Respuesta

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

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