javascript - 在移动设备上隐藏复选框的奇怪问题

Question

所以我一直在为我实习的地方开发后端界面，一切都进展顺利。我制作了一个页面，您可以在其中插入客户。有一个用于添加运输信息的复选框，并且这些字段是隐藏的，并且仅在勾选该复选框时才显示。显示时也需要它。我对免税复选框做了同样的事情，它隐藏了一个用于输入税号的字段，并且仅在选中并显示时才需要，否则不需要。这两个功能在 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);
    }
});

第一个脚本是运费，第二个脚本是税费。

谁能告诉我为什么 JUST THE TAX BOX 无法在移动设备上运行，而运输箱却可以在移动设备上正常运行。它们在桌面上都运行良好。

Answer 1

由于它在 JSFiddle 上正常工作，我的猜测是可能包含的 div 或元素未正确关闭。仔细比较 changeShipInputs 和 changeTaxInputs 的容器并报告。