Ist es möglich, Formularfelder auf Bootstrap Modal ein- und auszublenden?

Question

Ich habe mit dem Bootstrap-Modal gespielt, um ein Formular anzuzeigen. Alles ist in Ordnung für feste Felder, aber ich versuche, div abhängig von dem Wert eines vorherigen Felds zu zeigen und mehrere Beispiele von toggle Sichtbarkeit auf divs mit .show .hide Arbeit ok aus der modalen Box zu lesen, aber im modalen wird alles angezeigt . Ich bin neu mit Bootstrap, sorry, wenn meine Frage fehl am Platz ist, werden alle Lichter geschätzt. Dies ist die Form:

<div id="createEventModal" class="modal hide"> 

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
    <h3>Crear Pauta</h3> 
</div> 

<div class="modal-body"> 
    <form id="PautasForm" class="form-horizontal"> 

     <div class="control-group"> 
      <label class="control-label" for="inputTitle">Title:</label> 
      <div class="controls space"> 
       <input type="text" name="title" id="title" style="margin: 0 auto;"> 
       <input type="hidden" id="apptStartTime"/> 
       <input type="hidden" id="apptEndTime"/> 
       <input type="hidden" id="apptAllDay"/> 
       <input type="hidden" id="apptResource"/> 
       <input type="hidden" id="apptUser"/> 
       <input type="hidden" id="apptEdit"/> 
       <input type="hidden" id="apptID"/> 
      </div> 

      <div id="seller"> 
       <label class="control-label" for="SelIng">Seller</label> 

       <div class="controls space"> 
        <select id="ing" name="ing"> 
         <option value="">Select</option> 
         <?php 
         while ($row = mysql_fetch_array($ing)) { 
          echo "<option value='" . $row['id_ing'] . "'>" . $row['nombre_ing'] . "</option>"; 
         } 
         ?> 
        </select> 
       </div> 
      </div> 

      <div id="task"> 
       <label class="control-label" for="SelTask">Task</label> 

       <div class="controls space"> 
        <select id="task" name="task"> 
         <option value="0">Select task</option> 
         <option value="1">Customer Service</option> 
         <option value="2">Inventory</option> 
         <option value="3">Staff Management</option>        
        </select> 
       </div> 
      </div> 

      <div id="loc"> 
       <label class="control-label" for="SelLoc">Manager</label> 

       <div class="controls space"> 
        <select id="manager" name="manager"> 
         <option value="">Select Manager</option> 
         <?php 
         while ($row2 = mysql_fetch_array($loc)) { 
          echo "<option value='" . $row2['loc_id'] . "'>" . $row2['nombre_completo'] . "</option>"; 
         } 
         ?> 
        </select> 
       </div> 
      </div> 

     </div> 
     <div class="control-group"> 
      <label class="control-label" for="when">When:</label> 
      <div class="controls controls-row" id="when" style="margin-top:5px;"> 
      </div> 
     </div> 
    </form> 
</div> 
<div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button> 
    <button type="submit" class="btn btn-primary" id="submitButton">Guardar</button> 
</div> 

Und das ist das Skript:

<script type='text/javascript'> 

    $(document).ready(function() { 

toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values 
     //this will call our toggleFields function every time the selection value of our underAge field changes 
     $("#task").change(function() { 
      toggleFields(); 
     }); 

    }); 

    function toggleFields() { 
     if ($("#task").val() == 1) { 
      $("#loc").show(); 
     } else { 
      $("#loc").hide(); 
     } 
    } 

Answer 1

ohne Prüfung oder zu sehen, was Sie in Aktion tun, meine Theorie ist:

Alles ist bereits ausgeblendet, wenn die Toggle-Funktion aufgerufen wird, so dass das Ausblenden von Elementen darin nichts bewirkt. Entweder das oder das Modal überschreibt das Verbergen der inneren Elemente.

Versuchen Sie, den Toggle aufzurufen, wenn stattdessen Ihr Modal angezeigt wird.

$('.modal').on('show.bs.modal', function() { 
    toggleFields(); 
});