使用引导复选框显示/隐藏 div - 仅在选中复选框时才需要输入输入

Question

好的，我在使用复选框时遇到了一个非常奇怪的问题，该复选框使用引导程序折叠隐藏的 div。

如果我在复选框输入属性部分有 data-toggle="collapse"，则 Div Collapses 但要求填写其中的每一个输入。

如果 data-toggle="collapse" 不存在，隐藏的 div 不会折叠，如果选中复选框，则需要输入输入，如果未选中，我可以在没有输入的情况下提交表单进入。 （所需的操作，但选中复选框时 div 不会隐藏或显示）

如何在未选中/选中复选框时隐藏/显示 div 并且仅在选中复选框时才需要输入？

我将其用作 HTML：

                    <div class="col-md-1">
                    <input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
                    </div>
                    <label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
                        <div id="shipadddiv" style="visibility: hidden;">
                            <div class="collapse" id="moreabout" >
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <br>
                                        <input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)"  class="form-control shipClass" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-4">
                                        <input id="sCity" name="sCity" type="text" placeholder="City (required)" required  class="form-control shipClass">
                                    </div>
                                    <div class="col-md-4">
                                        <input id="sState" name="sState" type="text" placeholder="State (required)" required  class="form-control shipClass">
                                    </div>
                                    <div class="hidden-lg hidden-md">&nbsp;</div>
                                    <div class="col-md-4">
                                        <input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required  class="form-control shipClass">
                                    </div>
                                </div>
                            </div>  
                        </div>

和javascript：

function ChangeShip() {
      if (!(document.getElementById('chShipAdd').checked)) {
       document.getElementById('shipadddiv').style.visibility="hidden";
       $(".shipClass").prop("disabled",true);
      }
      else {
      document.getElementById('shipadddiv').style.visibility="visible";
      $(".shipClass").prop("disabled",false);
      }
  }

任何可行的解决方案都可以接受。我整天都在努力做这个简单的动作。我已经尝试过 .prop .attribute .setAttribute .removeAttribute 等等。

有什么建议吗？

Answer 1

尝试这样做：

HTML：

<div class="col-md-1">
    <input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
    <div class="collapse" id="moreabout" >
        <div class="form-group">
            <div class="col-md-12">
                <br>
                <input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)"  class="form-control shipClass" required>
             </div>
         </div>
         <div class="form-group">
             <div class="col-md-4">
                 <input id="sCity" name="sCity" type="text" placeholder="City (required)" required  class="form-control shipClass">
             </div>
             <div class="col-md-4">
                 <input id="sState" name="sState" type="text" placeholder="State (required)" required  class="form-control shipClass">
             </div>
             <div class="hidden-lg hidden-md">&nbsp;</div>
             <div class="col-md-4">
                     <input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required  class="form-control shipClass">
             </div>
         </div>
    </div>  
</div>

JQUERY：

$('#chShipAdd').change(function() {
    if ($('#chShipAdd').prop('checked')) {
        $('#shipadddiv').show();
    } else {
        $('#shipadddiv').hide();
    }
});

Answer 2

您的点击事件将切换显示和禁用，但是当加载表单时，您将拥有未被禁用的隐藏内容。

只需调用 document.ready 上的函数

function ChangeShip() {
   var show = $('#chShipAdd').prop('checked');
   $('#shipadddiv').toggle(show);
   $("#shipadddiv .shipClass").prop("disabled", !show);
}

$(ChangeShip); // call on document.ready

或者简单地将 disabled 属性添加到这些元素，以便初始表单状态有效

如果 [required] 属性仍然在 [disabled] 元素上触发，您可以调整属性值

function ChangeShip() {
   var show = $('#chShipAdd').prop('checked');
   $('#shipadddiv').toggle(show);
   $("#shipadddiv .shipClass").each(function(){
       if (!('_required' in this))
           this._required = this.required;

       this.disabled = !show;
       this.required = (show) ? this._required : false;
   });
}

Answer 3

您可以使用 jquery 快速解决这个问题。您可以包装您的输入以进行更改，并将其提供给 id。让 jquery 完成剩下的工作。

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

请参阅此jsfiddle 了解您的问题。这应该对您有所帮助。