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"> </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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie jquery verwenden um dieses Problem zu lösen schnell. Sie können wickeln Sie Ihre Eingaben für das ändern Schiff und geben Sie es und
id
. Und lassen Sie jquery erledigen den rest.Sehen diese jsfiddle für Ihr problem. Dies sollte Ihnen dabei helfen.
Ihre click-Ereignis wird die Anzeige wechseln, und die deaktiviert wird, wenn das Formular geladen wird, Sie haben versteckte Inhalte, die nicht deaktiviert.
rufen Sie einfach die Funktion auf dem Dokument.bereit
oder fügen Sie einfach das disabled-Attribut für diese Elemente, so dass die ursprüngliche form Staat gültig ist
Wenn die [erforderlich] - Attribut ist weiterhin ausgelöst, auf [disabled] - element könnten Sie jonglieren die Attribut-Wert
Versuchen, dies zu tun :
HTML :
JQUERY :