是否可以在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(); 
});