2016-08-26 7 views
0

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> 
+1

Was haben Sie versucht, weil Ihre Js nicht mit Ihrem html wie alle oben überein ? – VtoCorleone

+0

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. –

+0

@ 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. –

Antwort

2

Ich glaube, ich habe, was Sie für die Geige unten suchen. Ich habe es eingerichtet, wenn andere Farben hinzugefügt werden (außer Blau und Gelb) und wir wollen, dass sie sich wie Blau und Gelb verhalten, müssen wir keine Codeänderungen vornehmen. Die Logik ist, wenn grün markiert ist => deaktivieren Sie alle anderen und lassen Sie sie nicht ausgewählt werden. Wenn alle anderen markiert sind => markiere grün und deaktiviere alle anderen. Weitere Kommentare sind im Code zur Verfügung:

Fiddle w/ solution

var $green = $('.button[name="green"]'), //Get our special input, "green" 
    $notGreen = $('.button').not($green); //Get all other inputs 

$('.form-group').on('change', '.button', function() { //Attach handler at parent and delegate to .button class 
    if (!$(this).is(':checked')) { return; } //Only want to act when something is being checked 

    if ($green.is(':checked')) { 
     //If green is checked, want to uncheck everything else 
     $notGreen.prop('checked', false); //.prop is the best way to uncheck 
    } 
    else if ($notGreen.filter(':checked').length === $notGreen.length) { 
     //If every other input other than green is checked, check green and uncheck everything else 
     $notGreen.prop('checked', false); 
     $green.prop('checked', true); 
    } 
}); 

EDIT: Hier ist der generalisierten Code aus den Kommentaren, die mehrere Gruppierungen unterstützt: Generalized fiddle

prüfen unten Geige Code.

var $green = $('.button[name="green"]'), //Get our special input, "green" 
 
    $notGreen = $('.button').not($green); //Get all other inputs 
 

 
$('.form-group').on('change', '.button', function() { //Attach handler at parent and delegate to .button class 
 
\t \t if (!$(this).is(':checked')) { return; } //Only want to act when something is being checked 
 
    
 
\t \t if ($green.is(':checked')) { 
 
    \t \t //If green is checked, want to uncheck everything else 
 
    \t \t $notGreen.prop('checked', false); //.prop is the best way to uncheck 
 
    } 
 
    else if ($notGreen.filter(':checked').length === $notGreen.length) { 
 
    \t \t //If every other input other than green is checked, check green and uncheck everything else 
 
    \t \t $notGreen.prop('checked', false); 
 
    \t \t $green.prop('checked', true); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="blue">Blue 
 
     <input name="blue" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success"> 
 
    </label> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="yellow">Yellow 
 
     <input name="yellow" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success"> 
 
    </label> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="green">Green 
 
     <input name="green" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success"> 
 
    </label> 
 
</div>

+0

Das ist was ich gesucht habe! –

+0

Wie würden Sie Code arbeiten, wenn sagen würde, es gäbe eine andere Gruppe von Farben wie Rot, Gelb2, Orange. Gleiche Prämisse, aber in diesem Fall wäre Orange das "Grüne". –

+0

Siehe Bearbeiten oben für neue Geige –

1

Versuchen folgenden Ausschnitt.

$(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); 
 
      } 
 
     else 
 
      { 
 
      $("input[type='checkbox'][name='green']").prop('checked', false); 
 
      } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="blue">Blue 
 
     <input name="blue" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success"> 
 
    </label> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="yellow">Yellow 
 
     <input name="yellow" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success"> 
 
    </label> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="green">Green 
 
     <input name="green" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success"> 
 
    </label> 
 
</div>

+0

Ja. Ich habe Code ähnlich gesehen, aber das ist nicht die Funktion, nach der ich gesucht habe. Es hilft mir jedoch, meine Gedanken besser zu organisieren und wie das Javascript erstellt werden sollte. –

+0

@ cpt-crunchy: siehe Ich habe meine Antwort bearbeitet –

+0

Shakir irgendwie nahm Ihre Antwort und änderte es nur, um die Frage zu beantworten. Rücksichtslos. Danke für Ihre Hilfe! –

1

Sie können auch so tun,

$(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='yellow']").prop('checked', false); 
 
      $("input[type='checkbox'][name='blue']").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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="blue">Blue 
 
     <input name="blue" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success"> 
 
    </label> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="yellow">Yellow 
 
     <input name="yellow" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success"> 
 
    </label> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="green">Green 
 
     <input name="green" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success"> 
 
    </label> 
 
</div>

+0

Dies funktioniert auch. Beide Vorschläge scheinen jedoch Probleme zu haben, wenn ich bootstrap-toggle css verwende. Nicht sicher, ob das Javascript Probleme mit diesem CSS hat. http://www.bootstraptoggle.com/ –

+0

Wie würden Sie die Änderung nicht für den Eingabetyp, sondern die Klasse vornehmen? –

+0

@ cpt-crunchy Ich kann nicht verstehen, was du fragst ?? –

Verwandte Themen