Release Field after date [closed]

-1

Hello I need a javascript code in which I will have two fields one with the date and one Description that will be unblocked according to the indicated date and block the previous one Example

Startingon06/06/2018thepreviousfieldislockedandthenextfieldunlockedandsoon

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<h1>Desbloquear Campo Após Data</h1>
<div class="row">
              <div class="bs-example align-content-md-center">
                <table class="table table-condensed">
                  <thead>
                    <tr>
                      <th>Datas</th>
                      <th>Prazo</th>
                      <th>Campo</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><strong>Data 1</strong></td>
                      <td><div class="input-group enable-calendar">
                          <input type="text" class="form-control" id="data1" mask="00/00/0000" value="05/06/2018" readonly>
</div></td>
                      <td><input class="form-control" type="text" id="descricao1" name="descricao1" placeholder="Descrição" ></td>
                    </tr>
                    <tr>
                      <td><strong>Data 2</strong></td>
                      <td><div class="input-group enable-calendar">
                          <input type="text" class="form-control" id="data2" mask="00/00/0000" value="06/06/2018" readonly>
</div></td>
                      <td><input class="form-control" type="text" id="descricao2" name="descricao2" placeholder="Descrição" readonly></td>
                    </tr>
                    <tr>
                      <td><strong>Data 3</strong></td>
                      <td><input type="text" class="form-control" name="data3" id="data3" value="07/06/2018" readonly></td>
                      <td><input class="form-control" type="text" id="descricao3" name="descricao3" placeholder="Descrição" readonly></td>
                    </tr>
                  </tbody>
                </table>
              </div>
</div>






</body>
</html>
    
asked by anonymous 05.06.2018 / 15:32

1 answer

1

First you will need to get the value that is being changed or be the current date ai depends on you, when the form is loaded (put this in the header:

      $(document).ready(function(){
        $("#data1").change(function() {
         var data1 = document.getElementById("data1").value;
         // faça o seu IF aqui com a condição
         document.getElementById('descricao1').readOnly = false;
        });
       });
    
05.06.2018 / 16:21