So aktivieren oder deaktivieren Sie die Kontrollkästchen basierend auf ein click-Ereignis?

Habe ich eine web-app (PHP), und ich habe, dies zu ändern. Ich bin eher ein Datenbank, scripting guy, bitte tragen mit mir auf diesen einen!

Ich habe 8 Kästchen (glaube, nummeriert von 1~8) in eine form. Ich habe zu implementieren, die ein Zustand, wo sich in :

If one of the first 4 checkboxes are checked (only one checkbox can be checked in the first 4),
Then the next 4 checkboxes should be disabled
Else the next 4 checkboxes should be enabled.

Meine Lösung :

Machen die ersten 4 Checkboxen, radiobuttons, um zu bestätigen, um die nur eine
checkbox ausgewählt werden können Zustand.
Deaktivieren/Aktivieren Sie die nächsten 4 Checkboxen auf der Grundlage der oben genannten Maßnahmen. So,
wenn der radiobutton ist nicht markiert, dann die nächsten 4 Checkboxen sollten
zur Auswahl zur Verfügung.

Muss ich eigentlich deaktivieren Sie die Checkboxen anstatt ausblenden mit jQuery, also die Checkboxen werden sollte solidgray (nicht überprüft), wenn Sie deaktiviert ist.

Beispiel-code (abgestreift einige Formatierungen Durcheinander, für die anderen der Suche nach einer ähnlichen Lösung) :

        <div>
            <input type="checkbox" name="check1" value="1" id="check1" <?php if (!empty($rows['check1'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check2" value="1" id="check2" <?php if (!empty($rows['check2'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check3" value="1" id="check3" <?php if (!empty($rows['check3'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check4" value="1" id="check4" <?php if (!empty($rows['check4'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check5" value="1" id="check5" <?php if (!empty($rows['check5'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check6" value="1" id="check6" <?php if (!empty($rows['check6'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check7" value="1" id="check7" <?php if (!empty($rows['check7'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check8" value="1" id="check8" <?php if (!empty($rows['check8'])) { echo 'checked="checked"'; } ?> />
        </div>

Meine Anforderungen :

Was ist der effizienteste Weg, dies zu tun? (einfach ohne komplizierende das problem)
Jeder Beispielcode ist sehr geschätzt.

Hasse es dies zu sagen, aber jQuery wäre der einfachste Weg. Sie können zuweisen, Anzahl 4 onClick-events und deaktivieren Sie die nicht ausgewählte Kontrollkästchen, wenn Sie erreichen, Ihre gewünschte Anzahl.
nach id Sie geschlossen, input-tag, aber Sie sollten öffnen, php <?
Ich würde nicht wechseln, um radio-buttons, wie man Sie nicht ausschalten, so dass nur die Dinge zu komplizieren mehr.
Barlas : Bearbeiten. Editor Durcheinander diese. @ Dainis : Können Sie bitte erläutern oder post-Beispiel-code? @ jeroen : ich dachte, es ist esier zu verwenden-radio-button, kann aber nicht! Vielen Dank für das feedback. Ich werde erkunden Sie alle Kontrollkästchen, Lösung.
Nicht sicher, warum dies so ist, wird downvoted! Moderatoren, bitte schließen Sie die Frage, ob Sie denken, das macht keinen Sinn.

InformationsquelleAutor ThinkCode | 2012-09-24

1

Ich denke, das ist, was du bist suchen für. Sie können es erreichen mit .index() zu Holen Sie sich die aktuellen angeklickten checkbox. .slice() wird verwendet, um alle Elemente mit index 4 und nach.
```
$('input[type=checkbox]').change(function(){
    var $linputs =  $('input[type=checkbox]').slice(4);
    var $this = $(this);    
    $linputs.prop('disabled',($this.index() < 4 && this.checked));        
    if($this.index() < 4 && this.checked){
        $linputs.prop('checked',false);
    }
});
```
FIDDDLE

Oder ist es etwas wie diese, die Sie wollen? Wo nur eine der ersten vier Checkboxen überprüft werden können. Wenn ein ausgewählt ist, dann werden alle anderen deaktiviert werden.
```
$('input[type=checkbox]').change(function(){
    var $this = $(this);    
    $(linputs).prop('disabled',($this.index() < 4 && this.checked));        
    if($this.index() < 4 && this.checked){
        $(linputs).prop('checked',false);
    }
});
```
http://jsfiddle.net/h5wDr/

EDIT:

wenn Sie andere Checkboxen auf der Seite und wollen in der Lage sein, um Sie zu trennen von dieser Logik, können Sie hinzufügen Kontext, in dem Selektor-so hält es dieser code, der isoliert nur diejenigen, die innerhalb dieses div-wie so
```
<div id='test'>
                <input type="checkbox" name="check1" value="1" id="check1" >first
            <input type="checkbox" name="check2" value="1" id="check2" >second
            <input type="checkbox" name="check3" value="1" id="check3" >third
            <input type="checkbox" name="check4" value="1" id="check4" >fourth
            <input type="checkbox" name="check5" value="1" id="check5" >fifth
            <input type="checkbox" name="check6" value="1" id="check6" >sixth
            <input type="checkbox" name="check7" value="1" id="check7" >seventh
            <input type="checkbox" name="check8" value="1" id="check8" >eight
</div>
```
Dann fügen Sie einfach den Kontext
```
var $inputs = $('input[type=checkbox]', $('#test')); 
//this will only select checkboxes within the element with id=test
```
http://jsfiddle.net/h5wDr/2/
- Danke für den fiddle-Beispiel! Das problem ist, dass nur jeweils die ersten 4 können geprüft werden (mehr wie ein radio-button-Regel). Und wenn man die ersten 4 sind gesetzt, dann den rest in 5~8 sind deaktiviert.
- Überprüfen Sie heraus meine zweite Geige. Ich denke, das ist, was Sie wollen, dann
- Wow, spot an! Dies funktioniert genau so, wie ich wollte. Vielen Dank so viel für so eine einfach zu verstehende Lösung. Sie verlassen die Geige Lösung gibt, die für andere daraus zu lernen? Ich mag die Geige tool btw! Nochmals vielen Dank.
- Ja, ich lasse alle meine Antworten 🙂 und yw
- Ich habe Checkboxen in der form nicht haben sollte diese Regel angewandt werden soll. Wie kann ich isolieren, diese Regel nur auf diese 8 Checkboxen? Danke!!!
- hast du ein bestimmtes div mit einer id/Klasse, um Sie zu trennen? wenn ja, können Sie den Kontext innerhalb des Selektors. Ich ' ll hinzufügen eine aktualisierte Antwort, Ihnen zu zeigen,
- Ja, <div class="checkbox_div"> .
- Oh, ok. dann ändern Sie einfach meine update wie dieses var $inputs = $('input[type=checkbox]', $('div.checkbox_div'));
- Vielen, vielen Dank!
- Interessanterweise, wenn ich steckte Sie in Ihre Lösung, das deaktivieren von Checkboxen nur funktionieren, wenn entweder die erste oder die zweite checkbox ausgewählt werden. jQuery wird verwendet, in anderen Fällen von der Seite. Es gibt andere Checkboxen als gut, aber ich dachte, dass die div-id-test sollte darauf achten, nur diese Checkboxen aber anscheinend nicht. Irgendwelche Ideen? Danke!!!
- können Sie mir zeigen, Ihre html-Struktur in eine Geige? Es würde helfen, eine Menge mit, herauszufinden, warum es immer noch Probleme
- lassen Sie uns weiter, diese Diskussion im chat
InformationsquelleAutor ᾠῗᵲᄐᶌ
1
```
      <div>
        <input type="checkbox" name="check1" value="1" id="check1" />
        <input type="checkbox" name="check2" value="1" id="check2"  />
        <input type="checkbox" name="check3" value="1" id="check3"  />
        <input type="checkbox" name="check4" value="1" id="check4"  />
        <input type="checkbox" name="check5" value="1" id="check5"  />
        <input type="checkbox" name="check6" value="1" id="check6"  />
        <input type="checkbox" name="check7" value="1" id="check7"  />
        <input type="checkbox" name="check8" value="1" id="check8"  />
    </div>
<script>
    $(document).ready(function () {

        var $firstFourChecks = $("#check1,#check2,#check3,#check4");
        var $lastFourChecks = $("#check5,#check6,#check7,#check8");

        $firstFourChecks.on('click', function (e) {

            var isCheck = $(this).is(':checked');
            $firstFourChecks.not($(this)).prop('checked', false);
            $(this).prop('checked', isCheck);


            if (isCheck) {
                $lastFourChecks.prop("disabled", true).prop('checked', false);
            } else {
                $lastFourChecks.prop("disabled", false);
            }
        });
    });
</script>
```
Dies ist ganz in javascript, und ist Agnostiker auf die Tatsache, dass man mit Hilfe von php. Im wesentlichen stellen wir sicher, dass in den ersten vier für die Sie nicht ausgewählt haben, werden Sie auf false gesetzt. Dann werden wir wechseln den Status des geklickten.

Wenn Sie auf etwas auf, in Ihre ersten vier die letzten vier sind deaktiviert und deaktiviert werden, andernfalls sind Sie renabled. Dies entspricht dem pseudocode gepostet.

Sollten Sie in der Lage, fügen Sie diese direkt in. Die Selektoren werden zwischengespeichert für die Gründe der Schnelligkeit.

http://jsfiddle.net/L4qeN/ es hier zu sehen.

Edit: wow sieht aus wie jemand schlug mich auf die Pointe, indem Sie nur ein paar Minuten. Wir haben sehr verschiedene Methoden; aber.
- Dies ist sicherlich eine verbesserte version, da kann ich Umschalten von der ersten 4 Checkboxen! Lassen Sie mich sehen, wenn es passt mit meinem PHP-Lösung.
- Ich hoffe, es hilft. Nicht sicher, ob Sie markieren können mehrere Antworten als korrekt, aber ich Schätze jede rep als ich bin ganz neu und möchte mehr Zeit aufwenden, um hier anderen zu helfen
- Mehrere Antworten, die nicht unterstützt wird, aber deine Lösung funktioniert sicherlich. Von Ihnen positiv bewertet werden!
- Das script setzt jQuery bereits. <link href="jquery-ui/css/redmond/jquery-ui-1.8.9.custom.css"> <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script> <script type="text/javascript"> $(document).bereit(Funktion(){ ........... Ich fügte den code in diesem block und jetzt nichts auf der Seite angezeigt wird. Mache ich etwas falsch?
- Heyho, ich sehe die Verweise auf jQuery ui, stellen Sie sicher, dass jQuery verwiesen wird, bevor jquery-ui. jQuery ui ist ein ui-Erweiterung zu jQuery..baut es oben drauf. So jQuery kommt zuerst, dann die jQuery-ui
InformationsquelleAutor the_5imian
0

Müssten Sie es selbst ausprobieren, aber ich würde so etwas machen (mit javascript):
- Eine Klasse hinzufügen zu jeder checkbox der ersten Gruppe und eine weitere Klasse, um alle Kontrollkästchen für die zweite Gruppe;
- Check für change-Ereignissen für die erste Klasse, schalten Sie alle von der ersten Gruppe, aber die angeklickten;
- Überprüfen, ob jede von der ersten Gruppe ausgewählt ist, und aktivieren /deaktivieren Sie die zweite Klasse Gruppe entsprechend.
InformationsquelleAutor jeroen

Geben, Ihre ersten vier Checkboxen nur eine Klasse und dann Ihre zweite vier zweiter Klasse, und fügen Sie dann onclick - Handler, um das erste Kontrollkästchen:

$('.firstfour_class').click(
   if $('input:checkbox:checked.firstfour_class').length > 1){
       //code to turn OFF the second four and make them unchecked
   } else {
      //code to turn ON the second four
   }
})

Überprüfen Sie heraus die jQuery :geprüft selector.

InformationsquelleAutor Ben D

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.