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"> Grabar Datos</i>
</button>
<!-- pull-left determina posicion-->
<button type="button" class="btn btn-danger " data-dismiss="modal">
<i class="fa fa-close"> Salir</i>
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
dicho código genera la siguiente vista(modal):
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();
}
});
input
en función alcheckbox
que seleccione, para trabajar en caliente.