2017-08-09 35 views
2

Ich habe eine dynamische Liste von Kontrollkästchen alle mit der gleichen Klasse. Ich möchte den Submit-Button deaktivieren, bis alle Checkboxen in der Klasse "group1" ausgewählt wurden.Checkboxen nach Klasse alle ausgewählt

Ich möchte auch nur, wenn diese Klasse auf der Seite vorhanden ist. ich tat, war, dass ein Teil auf diese Weise:

<input type="checkbox" class="group1" value="20" /> 
<input type="checkbox" class="group1" value="15" /> 
<input type="checkbox" class="group1" value="14" /> 

if ($(".group1").length > 0) { 
//run below code 
} 

So wie dieser begann ich, aber ich bin nicht sicher, wie zu wissen, wann, alle Kontrollkästchen dieser Klasse ausgewählt sind.

$(document).ready(function() { 
    $(':input[type="submit"]').prop('disabled', true); 
    $('input[type="text"]').keyup(function() { 

    var checkboxes = $('.group1'); 
     if($(this).is(':checked')) { 
      //if all chekced, enable submit button 
      $(':input[type="submit"]').prop('disabled', false); 
     } else { 
     $(':input[type="submit"]').prop('disabled', true); 
     } 

    } 
    }); 
}); 

Ich habe diesen jQuery Array of all selected checkboxes (by class) gesehen, aber als die Klasse von beliebiger Länge sein kann, ich weiß nicht, wie zu überprüfen, ob alle ausgewählt sind.

Antwort

2

Sie können einfach so überprüfen, Gesamtzahl der Kontrollkästchen und die Gesamtzahl der überprüften Kontrollkästchen:

if ($('.group1').length == $('.group1:checked').length) { 
    // all are checked... 
    $(':input[type="submit"]').prop('disabled', false); 
} else { 
    $(':input[type="submit"]').prop('disabled', true); 
} 
3

Der einfachste Weg, dies zu tun, ist die Gesamtzahl der Kontrollkästchen, um die Zahl, die geprüft werden, zu vergleichen, dies wie:

var $group = $('.group1'); 
$(':input[type="submit"]').prop('disabled', $group.length != $group.filter(':checked').length); 
0
var selected = $(".group1:checked").length; 

Graf die Kontrollkästchen Weichen geprüft werden.

+0

Könnten Sie diese erweitern zu zeigen, wie sie die OP helfen kann? Es scheint eine halbe Antwort zu sein –

+0

Ich denke, dass Blawless 80% der Antwort hat, nur ein winziger Teil fehlt. Du antwortest sieht wirklich schlau aus ... – Schnatti

0

Zuerst müssen Sie ein Ereignis an die Kontrollkästchen binden, um jedes Mal, wenn sie den Status ändern, die Prüfung erneut auszuführen, um die Schaltfläche zu aktivieren oder zu deaktivieren.

Anschließend können Sie überprüfen, ob alle Kontrollkästchen die Länge Ihrer Gruppe zu vergleichen vs der Länge Ihrer Gruppe gefiltert durch :checked Pseudo-Selektor

und den Stand der Submit-Button zu ändern, geprüft werden, können Sie .prop Methode verwenden, die ein Attribut und einen Status dieses Attributs als zweiten Parameter akzeptieren. Also:

$group1 = $(".group1"); 
 
$submit = $('[type=submit]'); 
 
if ($group1.length > 0) { 
 
    $group1.on('change', checkBoxes) 
 
} 
 

 
function checkBoxes(){ 
 
    var $checked = $group1.filter(':checked'); 
 
    $submit.prop('disabled', $group1.length != $checked.length); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="group1" value="20" /> 
 
<input type="checkbox" class="group1" value="15" /> 
 
<input type="checkbox" class="group1" value="14" /> 
 
<input type="submit" disabled>

Verwandte Themen