1

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">&nbsp;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">&nbsp;Refinanciamiento</label>' +
        '<br>' +
        '<input type="checkbox" id="libre_disposicion" name="libre_disposicion" id="libre_disposicion">' +
        '<label for="libre_disposicion">&nbsp;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">&nbsp;Refinanciamiento</label>' +
        '<br>' +
        '<input type="checkbox" name="libre_disposicion" id="libre_disposicion">' +
        '<label for="libre_disposicion">&nbsp;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">&nbsp;Crédito hipotecario para compra</label>
          </div>
          <div id="refinanciamiento_div" style="display:none;">
            <input type="checkbox" id="refinanciamiento" name="refinanciamiento">
            <label for="refinanciamiento">&nbsp;Refinanciamiento</label>
          </div>
          <div id="libre_disposicion_div" style="display:none;">
            <input type="checkbox" id="libre_disposicion" name="libre_disposicion">
            <label for="libre_disposicion">&nbsp;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!

1 respuesta 1

1

Cuando añades elementos de manera dinámica (con JS, JQuery...) no vas a poder encontrarlos llamando directamente a su ID como te esta pasando con $("#refinanciamiento").

Para ello tienes que hacerlo mediente $(document) o algun elemento que no se haya creado de manera dinámica. Tiene que tener este formato:

$(document).on('nombre_del_evento', selector, function(){} );

En tu caso, debería de ser algo así:

$(document).on('click','#refinanciamiento', function() {
    //resto del código...
})
1
  • 1
    Gracias por la respuesta, si funciona!
    – Javier
    Commented el 21 dic. 2020 a las 14:00

Tu Respuesta

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

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