Question

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

如果我有数据切换=＆＃34;崩溃＆＃34;在复选框输入属性部分，Div折叠但要求填写其中的每一个输入。

如果数据切换=＆＃34;崩溃＆＃34;不存在，隐藏的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

您可以使用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。这应该对你有帮助。

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]属性，则可以处理属性值

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

尝试这样做：

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

使用bootstrap显示/隐藏div复选框 - 只有在选中复选框时才需要输入输入

3 个答案: