Enable field when radio is selected

Question

I’m learning javascript, so I was testing to make a radio that, when selected, enables a text area, and when not selected, disable it.

But what I was doing did not work and I did not understand why. That way I would like help to understand this. The code snippet I implemented is below.

<form action="logs-sistema.php" class="form-inline">
  <script language="javascript">
    function habilitacao(){
      if(document.getElementById('radio4').checked == true){
        document.getElementById('dataInicial').disabled = false;
        document.getElementById('dataFinal').disabled = false;
      }
      if(document.getElementById('radio4').checked == false){
        document.getElementById('dataInicial').disabled = true;
        document.getElementById('dataFinal').disabled = true;
      }
    }
  </script>
  <label class="radio-inline">
    <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline1" 
      value="option1" >Último semestre 
   </label>
   <label class="radio-inline">
     <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline2" 
       value="option2">Último mês
   </label>
   <label class="radio-inline">
     <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline3" 
       value="option3" checked>Última semana
    </label>
    <label for="radio4" class="radio-inline">
      <input type="radio" name="optionsRadiosInline" id="radio4" 
      onClick="habilitacao()" value="option4" >Entre 
     </label>
     <div class="form-group">
       <input type="date" class="form-control" id="dataInicial" placeholder="Data inicial" disabled>
     </div>

      <div class="form-group">
        <input type="date" class="form-control" id="dataFinal" placeholder="Data final" disabled>
      </div>

      <button type="submit" class="btn btn-primary">Pesquisar</button>
 </form>

Answer 1

You can do this using Jquery:

$(document).ready(function() {
  $("input[name='optionsRadiosInline[]'").on('click', function() {
    if ($("#radio_1").prop("checked", true)) {
      $("#dataInicial,#dataFinal").prop("disabled", false);
    } else {
      $("#dataInicial,#dataFinal").prop("disabled", true);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio-inline">
  <input type="radio" name="optionsRadiosInline[]" id="optionsRadiosInline1" value="option1">Último semestre
</label>
<label class="radio-inline">
  <input type="radio" name="optionsRadiosInline[]" id="optionsRadiosInline2" value="option2">Último mês
</label>
<label class="radio-inline">
  <input type="radio" name="optionsRadiosInline[]" id="optionsRadiosInline3" value="option3" checked>Última semana
</label>
<label for="radio4" class="radio-inline">
  <input type="radio" name="optionsRadiosInline[]" id="radio4" value="option4">Entre
</label>
<div class="form-group">
  <input type="date" class="form-control" id="dataInicial" placeholder="Data inicial" disabled>
</div>

<div class="form-group">
  <input type="date" class="form-control" id="dataFinal" placeholder="Data final" disabled>
</div>

<button type="submit" class="btn btn-primary">Pesquisar</button>

Answer 2

Good morning, my friend.

Its implementation is correct. However, it was missing to add the event onClick on the other radio button(optionsRadiosInline1, optionsRadiosInline2, optionsRadiosInline3).

form action="logs-sistema.php" class="form-inline">
  <script language="javascript">
    function habilitacao(){
      if(document.getElementById('radio4').checked == true){
        document.getElementById('dataInicial').disabled = false;
        document.getElementById('dataFinal').disabled = false;
      }
      if(document.getElementById('radio4').checked == false){
        document.getElementById('dataInicial').disabled = true;
        document.getElementById('dataFinal').disabled = true;
      }
    }
  </script>
  <label class="radio-inline">
    <input type="radio" onClick="habilitacao()" name="optionsRadiosInline" id="optionsRadiosInline1" 
      value="option1" >Último semestre 
   </label>
   <label class="radio-inline">
     <input type="radio" onClick="habilitacao()" name="optionsRadiosInline" id="optionsRadiosInline2" 
       value="option2">Último mês
   </label>
   <label class="radio-inline">
     <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline3" 
       value="option3" onClick="habilitacao()" checked>Última semana
    </label>
    <label for="radio4" class="radio-inline">
      <input type="radio" name="optionsRadiosInline" id="radio4" 
      onClick="habilitacao()" value="option4" >Entre 
     </label>
     <div class="form-group">
       <input type="date" class="form-control" id="dataInicial" placeholder="Data inicial" disabled>
     </div>

      <div class="form-group">
        <input type="date" class="form-control" id="dataFinal" placeholder="Data final" disabled>
      </div>

      <button type="submit" class="btn btn-primary">Pesquisar</button>
 </form>