Hola tengo un formulario, en el cual cuando selecciono en el primer <select>
, se cargan distintos <option>
del otro <select>
, y al seleccionar un <option>
del segundo <select>
se cargan distintos <input type="checkbox">
, ahora lo que estoy intentando hacer es que al checkear un checkbox, se cargue un <input type="text">
.
Aquí está el código desarrollado:
$(document).ready(function() {
$("#tipo_operacion").change(function() {
var val = $(this).val();
if (val == "Comprar") {
$("#condicion_propiedad").html("<option value='' disabled selected style='display:none;'>Seleccione...</option><option value='Nueva'>Nueva</option><option value='Usada por terceros'>Usada por terceros</option>");
} else if (val == "Refinanciar") {
$("#condicion_propiedad").html("<option value='' disabled selected style='display:none;'>Seleccione...</option><option value='Usada propia'>Usada propia</option>");
}
});
$("#condicion_propiedad").on("change", function() {
var seleccion = $(this).val();
$('#checkbox').html('');
if (seleccion == "Nueva") {
var $section = $(
'<input type="checkbox" id="credito_hip_compra" name="credito_hip_compra">' +
'<label for="credito_hip_compra"> Crédito hipotecario para compra</label>'
);
$('#checkbox').append($section);
}
if (seleccion == "Usada propia") {
var $section = $(
'<input type="checkbox" id="refinanciamiento" name="refinanciamiento" id="refinanciamiento">' +
'<label for="refinanciamiento"> Refinanciamiento</label>' +
'<br>' +
'<input type="checkbox" id="libre_disposicion" name="libre_disposicion" id="libre_disposicion">' +
'<label for="libre_disposicion"> Crédito Libre Disposición</label>'
);
$('#checkbox').append($section);
}
if (seleccion == "Usada por terceros") {
var $section = $(
'<input type="checkbox" id="refinanciamiento" name="refinanciamiento">' +
'<label for="refinanciamiento"> Refinanciamiento</label>' +
'<br>' +
'<input type="checkbox" name="libre_disposicion" id="libre_disposicion">' +
'<label for="libre_disposicion"> Crédito Libre Disposición</label>'
);
$('#checkbox').append($section);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="content">
<form>
<select id="tipo_operacion">
<option value="" disabled selected style="display:none;">Seleccione...</option>
<option id="Comprar" value="Comprar">Comprar</option>
<option id="Refinanciar" value="Refinanciar">Refinanciar</option>
</select>
<select id="condicion_propiedad" name="condicion_propiedad" class="multisteps-form__select form-control">
<option value="" disabled selected style="display:none;">Seleccione...</option>
</select>
<div class="form-row mt-4">
<div class="col-12 col-sm-6 mt-4 mt-sm-0">
<div id="checkbox"></div>
<div id="credito_hip_compra_div" style="display:none;">
<input type="checkbox" id="credito_hip_compra" name="credito_hip_compra">
<label for="credito_hip_compra"> Crédito hipotecario para compra</label>
</div>
<div id="refinanciamiento_div" style="display:none;">
<input type="checkbox" id="refinanciamiento" name="refinanciamiento">
<label for="refinanciamiento"> Refinanciamiento</label>
</div>
<div id="libre_disposicion_div" style="display:none;">
<input type="checkbox" id="libre_disposicion" name="libre_disposicion">
<label for="libre_disposicion"> Crédito Libre Disposición</label>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Esto lo que he intentado cuando hace click en el checkbox "refinanciamiento". (Esto funciona si es que el checkbox no es generado con js), así que no se si utilizar otras librerías para realizar aquello:
$("#refinanciamiento").on("click",function(){
$('#monto_refinanciamiento').html('');
if($("#refinanciamiento").is(':checked')) {
var $section_monto = $(
'<input class="multisteps-form__input form-control" id="refinanciamiento" name="refinanciamiento" placeholder="Monto en UF a refinanciar"/>'
);
$('#monto_refinanciamiento').append($section_monto);
}
});
Así es como se mostraría en la pagina web
<div id="monto_refinanciamiento"></div>
Espero que se haya entendido el problema en cuestión, saludos!