Question 207712 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Conditioned two groups of checkboxes

I have two groups of checkboxes: Products and Countries. What I’m trying to do is to have two conditions:

  • Case 1: 1 country + many products

  • Case 2: many countries + 1 product

So, If I select 2 products I should be able to select only 1 country. If I select multiple countries I should be able to select only 1 product.

Currently, it doesn’t work as expected. When I check on the product and then check the second, the first product gets deselected and all become disabled. About the countries – I’m able to select all of them.

Here is a demo: https://jsfiddle.net/816obeLj/

Here is what I have so far

$(document).ready(function() {
  var maxCountrySelection = 1;
  var maxIndicatorSelection = 1;

  var countryCheckboxes = $('input[type="checkbox"].countryCheckbox');
  var indicatorCheckboxes = $('input[type="checkbox"].indicatorCheckbox');

  countryCheckboxes.change(function() {
    var selectedCountries = countryCheckboxes.filter(':checked');
    var selectedIndicators = indicatorCheckboxes.filter(':checked');

    if (selectedCountries.length > maxCountrySelection) {
      countryCheckboxes.not(this).prop('checked', false).prop('disabled', true);
    } else {
      countryCheckboxes.prop('disabled', false);
    }

    if (selectedIndicators.length > 0) {
      indicatorCheckboxes.not(':checked').prop('disabled', true);
    } else {
      indicatorCheckboxes.prop('disabled', false);
    }
  });

  indicatorCheckboxes.change(function() {
    var selectedCountries = countryCheckboxes.filter(':checked');
    var selectedIndicators = indicatorCheckboxes.filter(':checked');

    if (selectedIndicators.length > maxIndicatorSelection) {
      indicatorCheckboxes.not(this).prop('checked', false).prop('disabled', true);
    } else {
      indicatorCheckboxes.prop('disabled', false);
    }

    if (selectedCountries.length > 0) {
      countryCheckboxes.not(':checked').prop('disabled', true);
    } else {
      countryCheckboxes.prop('disabled', false);
    }
  });
});
Tags:

2

Answers


  1. 0

    Your first issue in the JsFiddle was that the country checkboxes did not have the countryCheckbox class in the html.

    Additionally, the js logic could be simplifed as in this working example: JSFiddle

    $(document).ready(function() {
  var maxCountrySelection = 1;
  var maxIndicatorSelection = 1;

  var countryCheckboxes = $('.countryCheckbox');
  var indicatorCheckboxes = $('.indicatorCheckbox');
  var checkboxes = $('.countryCheckbox, .indicatorCheckbox');

  checkboxes.change(function() {
    var selectedCountries = countryCheckboxes.filter(':checked');
    var selectedIndicators = indicatorCheckboxes.filter(':checked');

    if (selectedCountries.length > maxCountrySelection && selectedIndicators.length >= 1) {
      indicatorCheckboxes.prop('disabled', true);
    } else {
      indicatorCheckboxes.prop('disabled', false);
        }

      if (selectedIndicators.length > maxIndicatorSelection && selectedCountries.length >= 1) {
      countryCheckboxes.prop('disabled', true);
    } else {
      countryCheckboxes.prop('disabled', false);
    }

  });
});
    Login or Signup to reply.
  2. 0

    Maybe like this:

      $(document).ready(function(){
    $('[name^=country], [name^=product]').change(function(){
        if($('[name^=country]:checked').length > 1){
          $('[name^=product]').attr({'type':'radio'});
        }else{
          $('[name^=product]').attr({'type':'checkbox'});
        }
        if($('[name^=product]:checked').length > 1){
          $('[name^=country]').attr({'type':'radio'});
        }else{
          $('[name^=country]').attr({'type':'checkbox'});
        }
    });
  });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <label><input type="checkbox" name="country[]" value="germany">germany</label>
  <label><input type="checkbox" name="country[]" value="italian">italian</label>
  <label><input type="checkbox" name="country[]" value="french">french</label>
  <br>
  <label><input type="checkbox" name="product[]" value="orange">orange</label>
  <label><input type="checkbox" name="product[]" value="apple">apple</label>
  <label><input type="checkbox" name="product[]" value="banana">banana</label>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search