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

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

如果在复选框输入属性部分中有data toggle=“collapse”，则Div将折叠，但需要填写其中的每一个输入

如果数据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>

任何有效的解决方案都是可以接受的。为了做这个简单的动作，我整天都在绞尽脑汁。我已经尝试了.prop.attribute.setAttribute.removeAttribute以及更多

---

有什么建议吗？

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

只需调用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;
   });
}

---

您可以使用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);
   }
});

看看这个问题。这应该会对您有所帮助。

尝试这样做：

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>

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

---

你能简化这个问题/代码，把代码放在一个剪贴簿里吗？这是一堵巨大的文本墙。如果我从复选框中删除data toggle=“collapse”-“disabled”属性设置为隐藏div中的每个输入，但div不会折叠。如果我添加data toggle=“collapse”，隐藏的div会显示和隐藏自己，但不管它是显示还是隐藏的，所有输入都是必需的。此外，复选框不显示为选中或未选中感谢您的响应。我添加了$（document.ready（function（）{ChangeShip（）；}）；并将转换功能改为您如何拥有它，它似乎仍在做同样的事情。在未填写字段的情况下无法提交表单。我尝试了使用或不使用data toggle=“collapse”添加的更新，帐户中的字段可能设置为必需的，也可能不设置为必需的，但如果它们都是必需的，那么您只需使用$（“#shipaddiv.shipClass”）.prop（“必需”，show）切换必需的属性即可；我检查了您的JSFIDLE，它完全按照我的预期工作。明天早上我会尽快做出改变，希望一切顺利。非常感谢你抽出时间。很抱歉给你带来了困惑。说得不太清楚。这是一个又一个问题欢迎@MortHub。。。我也有这个问题，这就是为什么谷歌非常有用的原因：）

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