Verstecken eines div-Elements, wenn das Kontrollkästchen aktiviert ist

Question

Ich versuche, ein bestimmtes div in meiner Register.cshtml-Ansicht zu verbergen, wenn ein Kontrollkästchen deaktiviert ist.

Script-Code:

<script type="text/javascript"> 
$(document).ready(function() { 
    $(function() { 
     $('#profesor').change(function() { 
      value = $(this).val(); 
      if (value == 0) { 
       $('#smjer').hide(); 
      } 
      else { 
       $('#smjer').show(); 
      } 
     }); 
    }); 
}); 

Checkbox 'profesor':

<div class="form-group"> 
    <label asp-for="profesor" class="col-md-2 control-label"></label> 
    <div class="col-md-10"> 
     <input type="checkbox" asp-for="profesor" class="form-control" id="profesor"> 
     <span asp-validation-for="profesor" class="text-danger"></span> 
    </div> 
</div> 

Div Element 'smjer':

<div class="form-group" id="smjer"> 
    <label asp-for="smjer" class="col-md-2 control-label"></label> 
    <div class="col-md-10"> 
     <select asp-for="smjer" class="form-control"> 
      <option>Računarstvo</option> 
      <option>Menadžment turizma i sporta</option> 
      <option>Održivi razvoj</option> 
     </select> 
      <span asp-validation-for="smjer" class="text-danger"></span> 

Wenn ich das Projekt ausführen, ist das Eingabefeld für 'Smjer' immer noch vorhanden und das Aktivieren oder Deaktivieren des Kontrollkästchens 'profesor' blendet das div-Element nicht aus oder zeigt es an.

Answer 1

Ihr Code sollte funktionieren, solange Ihr Kontrollkästchen ein Attribut mit dem Namen value mit dem Wert "0" hat. Aber es wird es nur verstecken/einmal zeigen. Wenn Sie erneut auf das Kontrollkästchen klicken, wird es nicht ein-/ausgeblendet, da der Wert Ihrer Kontrollkästchen immer noch gleich ist.

Wenn Sie die Sichtbarkeit nur anhand des aktivierten/deaktivierten Status ändern möchten, verwenden Sie die Methode jQuery toggle.

$(function() { 

    $('#profesor').change(function() { 
     $('#smjer').toggle(); 
    }); 

}); 

Answer 2

$(document).ready(function() { 
 
     $('#profesor').change(function() { 
 
      value = $(this).val(); 
 
      if (!this.checked) { 
 
       $('#smjer').hide(); 
 
      } 
 
      else { 
 
       $('#smjer').show(); 
 
      } 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label asp-for="profesor" class="col-md-2 control-label"></label> 
 
    <div class="col-md-10"> 
 
     <input type="checkbox" asp-for="profesor" class="form-control" id="profesor"> 
 
     <span asp-validation-for="profesor" class="text-danger"></span> 
 
    </div> 
 
</div> 
 

 
<div class="form-group" id="smjer"> 
 
    <label asp-for="smjer" class="col-md-2 control-label"></label> 
 
    <div class="col-md-10"> 
 
     <select asp-for="smjer" class="form-control"> 
 
      <option>Računarstvo</option> 
 
      <option>Menadžment turizma i sporta</option> 
 
      <option>Održivi razvoj</option> 
 
     </select> 
 
      <span asp-validation-for="smjer" class="text-danger"></span>