6

Estoy haciendo un form en php que tiene dos input radio. Al seleccionar uno, muestra el otro y oculta un div. Lo que pretendo es que cuando esté oculto este div, el required este deshabilitado. Lo estoy intentando hace horas, pero como no tengo experiencia con JavaScript mi código no esta funcionando en la parte de retirar el required.

Podrían ayudarme con esto?

 <script>
$(document).ready(function() {
  $("input[type=radio]").click(function(event){
    var valor = $(event.target).val();
    if(valor =="1"){
      $("#hospedagem").show( );
    } else if (valor == "0") {
      $("#hospedagem").hide(
        function () {
          $('#nome_hotel').removeAttr("required");
        }
      );
    } else { 
        // Otra cosa
    }
  });
});

Código html donde están las div's

<div class="form-group col-md-12">
  <label for="requer_quarto" class="control-label" style="margin-right: 20px;">¿Precisa cadastrar hospedagem para a excurssão? </label>
  <label class="radio-inline">
    <input type="radio" id="requer_quarto" name="requer_quarto" value="1" checked> SIM
  </label>
  <label class="radio-inline">
    <input type="radio" id="requer_quarto" name="requer_quarto" value="0"> NÃO
  </label>
</div>
<div class="form-group col-md-4" id="hospedagem">
  <label class="control-label">Hospedagem</label>
  <div>
    <input type="text" name="nome_hotel" id="nome_hotel" class="form-control input-lg" required="required">
    <span class="field-explanation" style="font-size: 14px;">ex. Pousada recanto verde</span>
  </div>
</div>

1 respuesta 1

4

Hola revise tu código y solo te hace falta agregar la propiedad id="hospedagem" al div que quieres ocultar.

Revisa el snnipet

$(document).ready(function() {
$("input[type=radio]").click(function(event){
    var valor = $(event.target).val();
    console.log(valor)
    if(valor == 1) {
        $("#hospedagem").show( );
    } else if (valor == 0) {
        $("#hospedagem").hide(
          function () {
             $('#nome_hotel').removeAttr("required");
             $("#nome_hotel").prop('required',false);
          });

    } else { 
        // Otra cosa
    }
  });
});

$("#botonEnviar").on('click',function(){

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <form id="pago">
<div class="form-group col-md-12">
  <label for="requer_quarto" class="control-label" style="margin-right: 20px;">¿Precisa cadastrar hospedagem para a excurssão? </label>
      <label class="radio-inline">
      <input type="radio" id="requer_quarto" name="requer_quarto" value="1" checked> SIM
       </label>

       <label class="radio-inline">
       <input type="radio" id="requer_quarto" name="requer_quarto" value="0"> NÃO
        </label>
</div>
<br>
<label class="control-label">Hospedagem</label>
   <div id="hospedagem">
     <input type="text" name="nome_hotel" id="nome_hotel" class="form-control input-lg" required>
      <span class="field-explanation" style="font-size: 14px;">ex. Pousada recanto verde
      </span>
   </div>
   <br>

    <input type="submit" id="botonEnviar" value="Enviar">
</form>

2
  • 1
    Consegui dela forma que indicastes, muchas gracias.
    – everson
    el 12 sep. 2019 a las 18:16
  • No olvides, marcar la respuesta como aceptada para que sea de ayuda a otros usuarios. el 12 sep. 2019 a las 18:42

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.