Radiobuttons und Checkboxen funktionieren nicht mit if/else in jquery

Question

Ich arbeite seit zwei Tagen, um Code auf RadioButtons und Checkboxen zu erhalten. Trotzdem kein Glück.

Um einen kleinen Zusammenhang zu geben: basierend auf der Auswahl über Radiobuttons, gibt es eine maximale Anzahl von Checkboxen zu überprüfen. Wenn ich zum Beispiel "Eins" aus den Radiobuttons wähle, darf ich nur ein Kontrollkästchen auswählen.

Die Auswahlmöglichkeiten sind also "None", "One" und "Two". Wenn die Leute keine auswählen, bleiben die Kontrollkästchen verborgen (das funktioniert). Wenn "Eins" oder "Zwei" ausgewählt wurde, erscheinen die Kontrollkästchen (dies funktioniert auch).

Wenn ich "Zwei" wähle, kann ich zwei Kontrollkästchen auswählen, und wenn ich "Eins" wähle, kann ich nur ein Kontrollkästchen auswählen. Das Problem ist jedoch, wenn ich von eins zu zwei wechsle, kann ich immer nur eins wählen.

Die HTML ist wie folgt:

<tr> 
    <td class="label"> 
    <label for="splits">Split(s)</label> 
    </td> 
    <td class="value"> 
    <div id="picker_splits" class="radio-select select swatch-control"> 
     <select id="splits" class="" name="attribute_splits" data-attribute_name="attribute_splits"> 
     <option value="">Een optie kiezen</option> 
     <option value="Geen">Geen</option> 
     <option value="Eén">Eén</option> 
     <option value="Twee">Twee</option> 
     </select> 
     <ul id="radio_select_splits57ac19f756a99" class="" data-attribute_name="attribute_splits"> 
     <li> 
      <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Geen" type="radio" data-value="Geen" value="Geen" /> 
      <label for="radio_splits57ac19f756a99_Geen">Geen</label> 
     </li> 
     <li> 
      <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Eén" type="radio" data-value="Eén" value="Eén" /> 
      <label for="radio_splits57ac19f756a99_Eén">Eén</label> 
     </li> 
     <li> 
      <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Twee" type="radio" data-value="Twee" value="Twee" /> 
      <label for="radio_splits57ac19f756a99_Twee">Twee</label> 
     </li> 
     </ul> 
    </div><a class="reset_variations" href="#">Wissen</a> 
    </td> 
</tr> 
</tbody> 
</table> 

<div class="wccpf-fields-group-1"> 

    <table class="wccpf_fields_table " cellspacing="0"> 
    <tbody> 
     <tr> 
     <td class="wccpf_label"> 
      <label for="plaatsing_splits">Plaatsing split(s)</label> 
     </td> 
     <td class="wccpf_value"> 
      <ul class="wccpf-field-layout-horizontal"> 
      <li> 
       <label> 
       <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="linkerzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Linkerzijde</label> 
      </li> 
      <li> 
       <label> 
       <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="rechterzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Rechterzijde</label> 
      </li> 
      <li> 
       <label> 
       <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="achterzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Achterzijde</label> 
      </li> 

      </ul> 
      <span class="wccpf-validation-message wccpf-is-valid-1">Wanneer je gekozen hebt voor een spit, mag dit veld niet leeg blijven</span> 
     </td> 
     </tr> 

Und hier ist das Skript:

jQuery(document).ready(function($) { 
    $("#picker_splits").change(function() { 
    var kiesJeExtras = $("#picker_splits option:selected").val(); 
    var verborgenKeuze = $(".wccpf-fields-group-1"); 
    if (kiesJeExtras == "Eén") { 
     verborgenKeuze.show('slow'); 
     $('input[type=checkbox]').on('change', function(e) { 
     if ($('input[type=checkbox]:checked').length > 1) { 
      $(this).prop('checked', false); 
      alert("allowed only 1"); 
     } 
     }); 
    } else if (kiesJeExtras == "Twee") { 
     verborgenKeuze.show('slow'); 
     $("#picker_splits[value=Eén]").removeProp("selected"); 
     $(".wccpf-field[value=linkerzijde]").prop("checked", false); 
     $(".wccpf-field[value=rechterzijde]").prop("checked", false); 
     $(".wccpf-field[value=achterzijde]").prop("checked", false); 
     $('input[type=checkbox]').on('change', function(e) { 
     if ($('input[type=checkbox]:checked').length > 2) { 
      $(this).prop('checked', false); 
      alert("allowed only 2"); 
     } 
     }); 
    } else { 
     verborgenKeuze.hide('slow'); 
     $(".wccpf-field[value=linkerzijde]").prop("checked", false); 
     $(".wccpf-field[value=rechterzijde]").prop("checked", false); 
     $(".wccpf-field[value=achterzijde]").prop("checked", false); 
     $('.wccpf-field[name=split_lengte]').val("0"); 
    } 
    }); 
}); 

Ich hoffe jemand kann mir helfen, wie ich jetzt 2 2 Tage bin stecken. Kann nicht herausfinden, was das Problem ist.

Answer 1

Werfen Sie einen Blick auf dieses Snippet. Anstelle der if-Fälle habe ich ein Datenattribut hinzugefügt, das die Anzahl der erlaubten Checkboxen festlegt.

Also zuerst bekommen wir die Anzahl von erlaubt von data-value="x". Dann prüfen wir, ob wir mehr zulassen oder nicht.

Beachten Sie, dass ich es im Dropdown nicht implementiert habe.

$('.wccpf-field-layout-horizontal input').change(function(){ 
 
    var noOfSelected = $('.wccpf-field-layout-horizontal input:checked').length; 
 
    // Get the allowed number based on the checked radio. 
 
    var noOfAllowed = $('#picker_splits input:checked').data('value'); 
 
    if(noOfSelected > noOfAllowed){ 
 
     alert('You have not checked ' + noOfSelected + '. You are only allowed to check ' + noOfAllowed); 
 
     $(this).prop('checked', false); 
 
    } 
 
}); 
 

 
$('#picker_splits input').change(function(){ 
 
    if($(this).data('value') == 0) 
 
    { 
 
     // Uncheck all. 
 
     $('.wccpf-field-layout-horizontal input:checked').prop('checked',false); 
 
     
 
     // Possibly hide? 
 
     //$('.wccpf-field-layout-horizontal input:checked').hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="label"> 
 
    <label for="splits">Split(s)</label> 
 
    </td> 
 
    <td class="value"> 
 
    <div id="picker_splits" class="radio-select select swatch-control"> 
 
     <select id="splits" class="" name="attribute_splits" data-attribute_name="attribute_splits"> 
 
     <option value="">Een optie kiezen</option> 
 
     <option value="Geen">Geen</option> 
 
     <option value="Eén">Eén</option> 
 
     <option value="Twee">Twee</option> 
 
     </select> 
 
     <ul id="radio_select_splits57ac19f756a99" class="" data-attribute_name="attribute_splits"> 
 
     <li> 
 
      <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Geen" type="radio" data-value="0" value="Geen" /> 
 
      <label for="radio_splits57ac19f756a99_Geen">Geen</label> 
 
     </li> 
 
     <li> 
 
      <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Eén" type="radio" data-value="1" value="Eén" /> 
 
      <label for="radio_splits57ac19f756a99_Eén">Eén</label> 
 
     </li> 
 
     <li> 
 
      <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Twee" type="radio" data-value="2" value="Twee" /> 
 
      <label for="radio_splits57ac19f756a99_Twee">Twee</label> 
 
     </li> 
 
     </ul> 
 
    </div><a class="reset_variations" href="#">Wissen</a> 
 
    </td> 
 
</tr> 
 
</tbody> 
 
</table> 
 

 
<div class="wccpf-fields-group-1"> 
 

 
    <table class="wccpf_fields_table " cellspacing="0"> 
 
    <tbody> 
 
     <tr> 
 
     <td class="wccpf_label"> 
 
      <label for="plaatsing_splits">Plaatsing split(s)</label> 
 
     </td> 
 
     <td class="wccpf_value"> 
 
      <ul class="wccpf-field-layout-horizontal"> 
 
      <li> 
 
       <label> 
 
       <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="linkerzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Linkerzijde</label> 
 
      </li> 
 
      <li> 
 
       <label> 
 
       <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="rechterzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Rechterzijde</label> 
 
      </li> 
 
      <li> 
 
       <label> 
 
       <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="achterzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Achterzijde</label> 
 
      </li> 
 

 
      </ul> 
 
      <span class="wccpf-validation-message wccpf-is-valid-1">Wanneer je gekozen hebt voor een spit, mag dit veld niet leeg blijven</span> 
 
     </td> 
 
     </tr> 
 
</table>

Answer 2

ändern $("#picker_splits")-$("#splits").

$("#splits").change(function() { 
    var kiesJeExtras = $("#splits option:selected").val(); 
    ...