Creating Dependent Chechboxradio Buttons - jQuery Mobile

Question

I am trying to create several checkboxradio buttons groups in jQuery mobile that depend on a limit checkboxradio button group value. For example if a limit of 6 is selected I want to only allow the user to be able to select up to a total of 6 children based on all of the other checkboxradio button group selected values and disable everything else. When the limit changes I want to update the UI accordingly.

I have the following code in my change event handler whenever any of the checkboxradio buttons are clicks:

function updateUI(element) {
    var limit = parseInt($('input[name="Limit_Total"]:checked').val(), 10);

   // Children
   var childCount = parseInt($('input[name="Child_Total"]:checked').val(), 10);
   var secondChildCount = parseInt($('input[name="Second_Child_Total"]:checked').val(), 10);
   var thirdChildCount = parseInt($('input[name="Third_Child_Total"]:checked').val(), 10);
   var fourthChildCount = parseInt($('input[name="Fourth_Child_Total"]:checked').val(), 10);
   var fifthChildCount = parseInt($('input[name="Fifth_Child_Total"]:checked').val(), 10);

   // Totals
   var totalChildern = childCount + secondChildCount + thirdChildCount + fourthChildCount + fifthChildCount;


   // Enable the correct combination of children
   $('input[name*="Child_Total"]').not(element).checkboxradio('disable').checkboxradio('refresh');
       for (var i = 0; i <= 6; i++) {
          if (i <= (limit - totalChildren)) {
              $('input[id$="Child_Total_' + i + '"]').not(element).checkboxradio('enable').checkboxradio('refresh');
          } else {
              $('input[id$="Child_Total_' + i + '"]').not(element).attr('checked', false).checkboxradio('refresh');
          }
       }
    }

I basically want to simulate the behavior illustrated in the image below:

The problem is it doesn't quite give me the behavior I want. It deselects all but the button I select within the group. I am trying to figure out the most efficient way to do this but I am having a hard time. Any suggestions or help would be greatly appreciated!

I have setup the following jsfiddle to demonstrate the UI: http://jsfiddle.net/X8swt/29/

Creating Dependent Chechboxradio Buttons - jQuery Mobile

1 Answers