Ich denke, dass ich mein Problem überdenken kann.Kontrollkästchen Umschaltoption
Ich habe 3 Kontrollkästchen mit dem Bootstrap-Toggle CSS. Ich habe 3 Checkboxen aber mein Zustand ist als solcher:
Wenn "Blau" und "Gelb" überprüft werden, dann wird "Grün" überprüft und die anderen 2 werden deaktiviert. Solange "Grün" aktiviert ist, kann "Blau" und "Gelb" nicht überprüft werden. Sie müssen nicht deaktiviert werden, wenn "Grün" aktiviert ist. Ich möchte eine Javascript-Datei verwenden, wenn dies in weniger Code mit Jquery getan werden kann. Offen für beides.
UPDATE: Ich habe die Kurzversion des HTML-Code zur Verfügung gestellt, der möglicherweise den Umgang mit dem "Toggle" ausgelöst hat. Bitte beachten Sie den bearbeiteten HTML-Code unten. In diesem Fall fand ich, dass die Klasse des div needs "BTN-default btn Toggle" von "Toggle btn btn-Erfolg off"
Code-Schnipsel EDITED
geschaltet werden<div class="form-group">
<label for="blue">Blue
<div class="toggle btn btn-success off" data-toggle="toggle" style="width: 0px; height: 0px;">
<input name="blue" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
<div class="toggle-group">
<label class="btn btn-default toggle-on">No</label>
<label class="btn btn-success active toggle-off">Yes</label>
<span class="toggle-handle btn btn-default"></span>
</div>
</div>
</label>
</div>
<div class="form-group">
<label for="yellow">Yellow
<div class="toggle btn btn-success off" data-toggle="toggle" style="width: 0px; height: 0px;">
<input name="yellow" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
<div class="toggle-group">
<label class="btn btn-default toggle-on">No</label>
<label class="btn btn-success active toggle-off">Yes</label>
<span class="toggle-handle btn btn-default"></span>
</div>
</div>
</label>
</div>
<div class="form-group">
<label for="green">Green
<div class="toggle btn btn-success off" data-toggle="toggle" style="width: 0px; height: 0px;">
<input name="green" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
<div class="toggle-group">
<label class="btn btn-default toggle-on">No</label>
<label class="btn btn-success active toggle-off">Yes</label>
<span class="toggle-handle btn btn-default"></span>
</div>
</div>
</label>
</div>
Ich mag das Skript, dass Mohit bieten. Da die Änderung jedoch nicht durch Ändern des Eingabetyps erfolgt, müsste das Skript stattdessen die Klasse div ändern. Danke für eure Hilfe!
<script>
$(document).ready(function() {
$("input[type='checkbox']").change(function (event) {
if(!$("input[type='checkbox'][name='blue']").is('checked') && !$("input[type='checkbox'][name='yellow']").is('checked'))
{
$("input[type='checkbox'][name='green']").prop('checked', true);
$("input[type='checkbox'][name='blue']").prop('checked', false);
$("input[type='checkbox'][name='yellow']").prop('checked', false);
}
else if(!$("input[type='checkbox'][name='green']").is('checked'))
{
$("input[type='checkbox'][name='blue']").prop('checked', false);
$("input[type='checkbox'][name='yellow']").prop('checked', false);
}
});
});
</script>
Was haben Sie versucht, weil Ihre Js nicht mit Ihrem html wie alle oben überein ? – VtoCorleone
Ja. Wie ich oben erwähnt habe, würde ich das Javascript, das ich zur Verfügung gestellt habe, als Ausgangspunkt verwenden und es an meine Bedürfnisse anpassen. Ich weiß, dass es nicht passt. –
@ cpt-crunchy: Wenn die gelb und blau überprüft werden und dann nur grün überprüft werden kann, ist es das, wonach Sie suchen? bis zur Zeit kann Grün deaktiviert werden. –