モバイル上のチェックボックスを隠す奇妙な問題

私はインターンをしている場所のバックエンドインターフェイスに取り組んでいましたが、すべてがスムーズに進行しています。私は顧客を挿入するページを作った。配送情報を追加するためのチェックボックスがあり、フィールドは非表示になっており、チェックボックスが選択されている場合にのみ表示されます。それが表示されているときにも必要です。 Tax Exemptチェックボックスでも同様のことをしました。納税者IDを入力するフィールドが表示されず、チェックされて表示されている場合にのみ必要です。それ以外の場合は必須ではありません。これらの機能は両方ともPCでうまく機能し、まったく同じようにコード化されています。しかしながら;私はモバイルでそれを試しに行くと、出荷チェックボックスが動作し、情報を入力するフィールドをドロップダウンします。しかし、税免除ボックスには税IDを入力するフィールドが表示されません。モバイル上のチェックボックスを隠す奇妙な問題

送料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); 
    } 
});

最初のスクリプトは、第二の税金で、出荷です。

誰も私がなぜ税金の箱がモバイルで動作しないのか教えてもらえますが、輸送箱はモバイルでうまく動作します。両方ともデスクトップ上でうまく動作します。

出典

2016-07-06 Deron EZ Lauver

本当に表示されていませんか？あなたはそこにcol-md-3を持っていますので、それは100％幅になるでしょう。多分それは別の場所にジャンプし、そして/または他の要素によって覆われています。 –

私はそれをmd-12に設定しようとしましたが、それはそれを幅全体にしました、そして、それはまだデスクトップ上で働いていました。モバイルではまだ運がない。提案をありがとう –

私はupvoteを得ることができますか？私は本当に問題が何であるかを知りたいのです –