Zeigen/Verbergen von div-Verwendung von bootstrap-checkbox - Eingänge erfordern nur eingegeben werden, wenn der checkbox überprüft wird

Ok, ich habe ein echt komisches problem mit einer checkbox, die zusammenbricht, ein verstecktes div mit bootstrap.

wenn ich data-toggle="Zusammenbruch" in der checkbox-input-Attribut Abschnitt der Div Zusammenbricht, aber erfordert, dass jeder einzelne von den Eingängen innen ausgefüllt werden.

Wenn data-toggle="collapse" ist nicht da, die versteckten div-nicht einbrechen, und wenn die checkbox aktiviert ist es erforderlich die Eingänge eingegeben werden müssen und wenn es nicht gegengesteuert wird, kann ich das Formular abschicken, ohne die Eingänge eingegeben werden. (gewünschte Aktion, aber das div nicht ausblenden oder anzeigen, wenn das Kontrollkästchen aktiviert ist)

Wie kann ich das anzeigen/verstecken der div, wenn die checkbox deaktiviert/aktiviert UND benötigen nur die Eingänge, wenn die box aktiviert ist?

Ich bin mit diesem als 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>

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

Jede Lösung, die akzeptabel sein wird. Habe ich schmiss mein Gehirn den ganzen Tag damit zu tun diese einfache Aktion. Ich habe versucht,.prop .Attribut .setAttribute .removeAttribute, und vieles mehr.

Irgendwelche Ratschläge?

  • Können Sie vereinfachen, dass die Frage / code, und setzen Sie den code in ein snippit? Das ist eine große wall of text.
  • Wenn ich entfernen data-toggle="collapse" von der checkbox - die "deaktiviert" - Attribut festgelegt wird, jedem der Eingänge in die versteckten div, ABER das div nicht einstürzt. Wenn ich die data-toggle="collapse" die versteckten div-shows und versteckt sich, aber unabhängig davon, ob es ein-oder ausgeblendet, werden ALLE Eingaben sind erforderlich. Auch die checkbox nicht zeigen, wie aktiviert oder deaktiviert werden
InformationsquelleAutor DMort | 2016-06-29
Schreibe einen Kommentar