我正在尝试在jQuery移动中创建几个复选框单选按钮组,这些组取决于限制复选框单选按钮组的值。例如,如果选择了6的限制,则只允许用户根据所有其他复选框单选按钮组选择的值选择最多6个孩子,并禁用其他所有内容。当限制更改时,我希望相应地更新UI。
每当单击任何复选框单选按钮时,我的更改事件处理程序中都有以下代码:
我想要模拟下面图片中所示的行为: 问题在于它并不能给我想要的行为。它会取消选择组内除我所选按钮以外的所有按钮。我正在尝试找出最有效的方法来解决这个问题,但是我很难做到。有任何建议或帮助将不胜感激!我已经设置了以下jsfiddle来演示UI:http://jsfiddle.net/X8swt/29/
每当单击任何复选框单选按钮时,我的更改事件处理程序中都有以下代码:
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');
}
}
}
我想要模拟下面图片中所示的行为: 问题在于它并不能给我想要的行为。它会取消选择组内除我所选按钮以外的所有按钮。我正在尝试找出最有效的方法来解决这个问题,但是我很难做到。有任何建议或帮助将不胜感激!我已经设置了以下jsfiddle来演示UI:http://jsfiddle.net/X8swt/29/
.checkboxradio()
,它已经被增强了。 - Omar