Radiobuttons and checkboxes don't work with if/else in jquery

Question

I have been working for two days now to get some code on radiobuttons and checkboxes working. Still no luck though.

To give a little context: based on the choice made through radiobuttons, there's a maximum allowed checkboxes to check. So for example if I choose 'One' from the radiobuttons, I'm allowed to select just one checkbox.

So the choices people get is 'None', 'One' and 'Two'. If people choose none, the checkboxes stay hidden (this works). If chosen 'One' or 'Two', the checkboxes appear (this also works).

When I choose 'Two' I can get to select two checkboxes, and then when I choose 'One', I do get to choose just one checkbox. The problem however is when I switch from One to Two, I can always just choose one.

The HTML is as following:

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

And here's the script:

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");
    }
  });
});

I hope someone can help me as I'm stuck for 2 two days now. Can't figure out what the problem is.

Answer 1

Take a look at this snippet. Instead of the if-cases I added a data-attribute that set the number of allowed checkboxes.

So first we get the number of allowed from data-value="x" . Then we check if we allow more or not.

Note that I haven't implemented it in the dropdown.

 $('.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

Change $("#picker_splits") to $("#splits") .

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