隱藏複選框在手機上的奇怪問題

所以我一直在爲我在哪裏實習的後端接口工作，並且一切都以平穩爲主。我做了一個頁面，插入一個客戶。有一個複選框可以添加送貨信息，並且這些字段是隱藏的，並且只有在勾選複選框時纔會顯示。它在展示時也是必需的。我爲免稅複選框做了同樣的事情，在那裏它隱藏了輸入稅號的字段，並且只有在它被選中並顯示時才需要，否則不需要。這兩個功能在PC上都非常有效，並且它們的編碼完全相同。然而;當我在移動設備上嘗試時，運輸複選框將起作用，並且會下拉字段以輸入信息。然而，免稅箱並不顯示輸入稅號的字段。隱藏複選框在手機上的奇怪問題

航運HTML：

    <div id="changeShipInputs"> 
         <div class="form-group"> 
          <div class="col-md-12"> 
           <input id="Sstreet" name="Sstreet" type="text" maxlength="150" placeholder="Street Name (required)" class="form-control"> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-md-4"> 
           <input id="Scity" name="Scity" type="text" maxlength="35" placeholder="City (required)" class="form-control"> 
          </div> 
          <div class="col-md-4"> 
           <input id="Sstate" name="Sstate" type="text" maxlength="35" placeholder="State (required)" class="form-control"> 
          </div> 
          <div class="hidden-lg hidden-md">&nbsp;</div> 
          <div class="col-md-4"> 
           <input id="Szipcode" name="Szipcode" type="text" maxlength="15" placeholder="Zip (required)" class="form-control"> 
          </div> 
         </div> 
        </div>

稅HTML：

    <div id="changeTaxInputs"> 
         <div class="form-group"> 
          <div class="col-md-3"> 
           <input id="taxID" name="taxID" type="text" maxlength="15" placeholder="Tax ID: (required)" class="form-control"> 
          </div> 
         </div> 
        </div> 
          <hr> 
        <div class="col-xs-12"> 
         <div class="form-group"> 
          <label for="comment">Notes:</label> 
          <textarea class="form-control" rows="5" maxlength="255" name="comment" id="comment"></textarea> 
         </div> 
        </div> 
         <div class="col-xs-12"> 
          <br> 
         </div>

的Javascript：

var form = $('#myForm'), 
checkbox = $('#changeShip'), 
chShipBlock = $('#changeShipInputs'); 

chShipBlock.hide(); 

checkbox.on('click', function() { 
    if($(this).is(':checked')) { 
     chShipBlock.show(); 
     chShipBlock.find('input').attr('required', true); 
    } else { 
     chShipBlock.hide(); 
     chShipBlock.find('input').attr('required', false); 
    } 
}); 

var form = $('#myForm'), 
checkbox = $('#changeTax'), 
chTaxBlock = $('#changeTaxInputs'); 

chTaxBlock.hide(); 

checkbox.on('click', function() { 
    if($(this).is(':checked')) { 
     chTaxBlock.show(); 
     chTaxBlock.find('input').attr('required', true); 
    } else { 
     chTaxBlock.hide(); 
     chTaxBlock.find('input').attr('required', false); 
    } 
});

第一個腳本是航運，第二個是稅收。

誰能告訴我爲什麼只是TAX BOX不會在手機上工作，但運輸箱在手機上運行良好。他們都在桌面上工作。

來源

2016-07-06 Deron EZ Lauver

你確定它沒有顯示？你在那裏有col-md-3，所以在移動設備上它會有100％的寬度，所以它可能跳到其他地方和/或被其他元素覆蓋。 –

我試圖將它設置爲一個md-12，並且它使整個寬度，它仍然在桌面上。儘管如此，手機仍然沒有運氣。感謝您的建議 –

我可以得到upvote？我真的很想知道問題在這裏 –