visible or invisible input when selecting checkbox

Question

The Form has a checkbox that when selecting shows an input that is hidden.

It is working correctly, when I enter the page the input is hidden and is only visible when I select the checkbox, as I show:

<div class="table-responsive">  
<label for="IniciarTarefa">Tarefa a Par</label>
<input type="checkbox" name="check" id="check" value="Sim"/>
<div class="form-group input-group input-group-lg">
    <span class="input-group-addon">
    <span class="glyphicon glyphicon-user"></span>
    </span>
    <select class="form-control" name="Acompnhante" id="Acompnhante" style="display:none" required="" placeholder="Acesso">
      <option></option>
      <?php        
         $sql = "SELECT * FROM raddb.usuarios ORDER BY nome ASC";
         $qr = mysqli_query($conn, $sql);
         while($ln = mysqli_fetch_assoc($qr)){
            echo '<option value="'.$ln['id'].'">'.$ln['nome'].'</option>';
         }
      ?>        
    </select>
  </div>
</div> 

Script:

$("#check").click(function(){
if($(this).val()=="Sim"){
$("#Acompnhante").css("display","block");
$(this).val("false");
}
else{
$("#Acompnhante").css("display","none");
$(this).val("Sim");
}
});

The problem arises when I enter in the database and with AJAX clean this input and the checkbox within the function success, in this way:

$.ajax({
        url: './insertarefa',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){

        },
        success: function(result)
        { 
        $('#check').attr('checked', false);
        $("#Acompnhante").val("");
        }
    });

After clearing the two fields with AJAX, when I select the checkbox hides the input, changes the process, because when I clean the two fields the input is visible. How can I solve?

Answer 1

Change how to hide/show the widget based on whether the checkbox is checked:

$("#check").click(function(){

   $("#Acompnhante")[this.checked ? "show" : "hide"]();

   if($(this).val()=="Sim"){
      $(this).val("false");
   }
   else{
      $(this).val("Sim");
   }
});

See: if the element is checked, call the function show() (show), if not, call the function .hide() (hide). For this I used a ternary operator alternating between the two functions:

And in the success, add .hide() to the element:

$("#Acompnhante").val("").hide();
                           ↑
                   esconde o elemento

And return the value to "Yes" at the checkbox:

$('#check').prop('checked', false).val("Sim");
                                    ↑

Example:

function simular(){
   $("#Acompnhante").val("").hide();
   $('#check').prop('checked', false).val("Sim");
}


$("#check").click(function(){

   $("#Acompnhante")[this.checked ? "show" : "hide"]();

   if($(this).val()=="Sim"){
      $(this).val("false");
   }
   else{
      $(this).val("Sim");
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">  
<label for="IniciarTarefa">Tarefa a Par</label>
<input type="checkbox" name="check" id="check" value="Sim"/>
<div class="form-group input-group input-group-lg">
    <span class="input-group-addon">
    <span class="glyphicon glyphicon-user"></span>
    </span>
    <select class="form-control" name="Acompnhante" id="Acompnhante" style="display:none" required="" placeholder="Acesso">
      <option></option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
</div>

<button onclick="simular()">Simular Ajax</button>

Answer 2

This is because you check if the value of #Escort is 'yes', if it is anything else it is invisible. You can perform a checkbox event by javascript instead of setting its attribute and #Escort value. But I believe that change in your Success $("#Acompnhante").val(""); for $("#Acompnhante").val("Sim"); should already solve;