Pick selected radio button value and start IF, ELSE IF, ELSE

Asked

Viewed 1,207 times

1

When loading the page, I need to check which radio button is selected. Then start the IF, ELSE IF, ELSE.

html

  <input type="radio" name="situacao" id="situacao_reserva" value="R" /> Reserva

  <input type="radio" name="situacao" id="situacao_saida" value="S" checked />Saida

  <input type="radio" name="situacao" id="situacao_chegada" value="C" />Retornou

JS

$("input[name=situacao]").on('change', function() {
  if ($(this).val() == "S") {

    $("#data_ini").attr("readonly", true);
    $("#data_ini").attr("disabled", "disabled");

    $('#tab-kmUsado').css('display', 'none');

  } else if ($(this).val() == "C") {

    $("#data_fim").attr("readonly", true);
    $("#data_fim").attr("disabled", "disabled");

    $("#situacao_saida").attr("disabled", "disabled");

    $("#data_fim").val(str_data + " " + str_hora);

  } else {

  }
}).change();

When loading the page, radio saída, already appears disabled, sedo that it should disable only when it is clicked on radio retornou.

3 answers

1

You can use a document.getElementById to take the value of the three, remove the value of the inputs and then do the following:

//botão para enviar o valor do radio
<input type="submit" value="enviar" onclick="exemplo();">

function exemplo(){
var reserva = document.getElementById("situacao_reserva").value;
var saida = document.getElementById("situacao_saida").value;
var chegada = document.getElementById(""situacao_chegada").value;

if(reserva==true)
{  
    //insira o código
}
elseif(saida==true)
{
    $("#data_ini").attr("readonly", true);
    $("#data_ini").attr("disabled", "disabled");
}
elseif(chegada==true)
{
    $("#data_fim").attr("readonly", true);
    $("#data_fim").attr("disabled", "disabled");
    $("#situacao_saida").attr("disabled", "disabled");
    $("#data_fim").val(str_data + " " + str_hora);    
}
}

In case my code doesn’t help, probably the problem of the code already appearing disabled, is because you put a else. The moment this function rotates, it will fall into the else all the time

1

On terms instead of $(this).val() to get the values use $("input[name=situacao]:checked").val()

About

1


When using the Trigger .change() the event will scroll through all 3 radios, and this will not work properly because it will enter all if’s.

What you need to do is just add the methods .parent()and .find() before the .change() to search only the checked radio:

$("input[name=situacao]").on('change', function() {

   if ($(this).val() == "S") {

      $("#data_ini").attr("readonly", true);
      $("#data_ini").attr("disabled", true);

   } else if ($(this).val() == "C") {

      $("#data_fim").attr("readonly", true);
      $("#data_fim").attr("disabled", true);
      $("#situacao_saida").attr("disabled", true);
      $("#data_fim").val(str_data + " " + str_hora);

   } else {

   }
}).parent().find("input[name=situacao]:checked").change();

The .parent().find("input[name=situacao]:checked") will only get the radio checked in the parent element shoot the .change().

Testing:

// valores apenas para exemplo
str_data = "02/04/2019";
str_hora = "10:00";

$("input[name=situacao]").on('change', function() {

   if ($(this).val() == "S") {

      console.log("S");
      $("#data_ini").attr("readonly", true);
      $("#data_ini").attr("disabled", true);

   } else if ($(this).val() == "C") {

      console.log("C");
      $("#data_fim").attr("readonly", true);
      $("#data_fim").attr("disabled", true);
      $("#situacao_saida").attr("disabled", true);
      $("#data_fim").val(str_data + " " + str_hora);

   } else {

      console.log("R");

   }
}).parent().find("input[name=situacao]:checked").change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="data_ini"> data_ini
<br>
<input id="data_fim"> data_fim
<br>
<input type="radio" name="situacao" id="situacao_reserva" value="R" /> Reserva
<br>
<input type="radio" name="situacao" id="situacao_saida" value="S" checked />Saida
<br>
<input type="radio" name="situacao" id="situacao_chegada" value="C" />Retornou

  • San, I added $('#tab-kmUsado').css('display', 'none');, but it is not running when the page is loaded, only when the radio click is done. Because this?

  • Try $('#tab-kmUsado').hide();

  • Nor did it.

  • It only works when I change the radio selection.

  • Blz, thank you very much.

  • I fixed it, but use it $('#tab-kmUsado').hide(); instead of $('#tab-kmUsado').css('display', 'none');, which is the same thing.

  • Gave Cero! Thank you.

  • Sam, how do I call this command $(".c").on('change', function(e) { within the else if ($(this).val() == "C").

  • Man, I’m out. I can see that later for you

  • Blz, I created another post to improve understanding. See https://answall.com/questions/373115/chamar-evento-dentro-de-other-evento-jquery

Show 5 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.