是否可以在Bootstrap Modal上顯示和隱藏表單域？

Question

我一直在玩bootstrap模式來顯示錶單。一切都可以固定字段，但即時嘗試顯示div取決於前一個字段的值，並閱讀使用.show .hide工作好幾個切換可見性的例子在模式框中，但在模態中顯示所有顯示。我是bootstrap新手，很抱歉，如果我的問題不合適，任何燈將不勝感激。這是形式：

<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> 

這是腳本：

<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

未經測試或看到你在行動中做什麼，我的理論是：

一切當您的切換功能被調用時，它已經隱藏起來，所以隱藏其中的元素什麼也不做。無論是或顯示模態重寫隱藏內部元素。

嘗試調用切換時，您的模態顯示，而不是。

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