创建从属 Chechboxradio 按钮 - jQuery 移动

Question

我正在尝试在 jQuery 移动设备中创建几个依赖于限制复选框单选按钮组值的复选框单选按钮组。例如，如果限制为 6 selected，我只想允许用户能够 select 最多 6 children 基于所有其他复选框单选按钮组selected 值并禁用其他所有内容。当限制发生变化时，我想相应地更新 UI 。

每当单击任何复选框单选按钮时，我的更改事件处理程序中都有以下代码：

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 select 外，它都被 select 删除。我试图找出最有效的方法来做到这一点，但我很难过。任何建议或帮助将不胜感激！

我设置了以下 jsfiddle 来演示 UI：http://jsfiddle.net/X8swt/29/

Answer 1

我设法用以下功能解决了我的问题：

$('div fieldset').each(function() { 
        // Disable all none checked inputs 
        $(this).find('input:not(:checked)').checkboxradio().checkboxradio("disable").checkboxradio("refresh");
        // Grab the selected input
        var selectedElement = $(this).find('input:checked');
        // Calculate the remaining children that can be selected
        var remaining = (limit - totalChildern);
        // Enable all inputs less than the selected input
        $.each($(selectedElement).parent().prevAll().find('input'), function() {
            $(this).checkboxradio().checkboxradio("enable").checkboxradio("refresh");
        });
        // Enable up to the remaining boxes past the selected input
        $.each($(selectedElement).parent().nextAll().slice(0,remaining).find('input'), function() {
           $(this).checkboxradio().checkboxradio("enable").checkboxradio("refresh"); 
        });
    });

请随时评论或批评我的解决方案。

创建从属 Chechboxradio 按钮 - jQuery 移动

Creating Dependent Chechboxradio Buttons - jQuery Mobile

javascript

jquery

jquery-mobile