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

Question

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.

Answer 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

Answer 2

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

About

Answer 3

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