我正在使用带有 jQuery Mobile 的 Visual Studio 2012 开发 MVC4 移动应用程序。我需要记住复选框和单选按钮的状态,以便将它们的值存储在 cookie 中。当我回到 pageinit 事件中的页面时,我设置了值,但控件永远不会在视觉上更新。使用 Firebug 将页面呈现为移动设备,我可以看到值已正确更改。我试过在这样的元素上调用 checkboxradio('refresh'):
$('#btnCompany').prop('checked', true)checkboxradio('refresh');
但我总是收到一条错误消息,提示 checkboxradio 未定义且不受支持。我知道控件是一个单选按钮。为了尝试解决这个问题,我在 jQuery Mobile 中提取了代码以刷新我调用的单选按钮和复选框,我再次可以在 Firebug 中清楚地看到,不仅输入检查正确,而且标签类也已适当更改。然而,在视觉上没有任何变化,它们看起来就像原来一样。我错过了什么吗?为什么即使我在 pageinit 事件中调用它,我也会收到错误消息,说 checkboxradio 不受支持:
$("input[type='radio']").checkboxradio("refresh");
我尝试通过隐藏然后显示包含的 div 来刷新,但失败了。我没有尝试过在视觉上刷新控件。任何和所有的帮助将不胜感激!!!
这是我正在调用以绕过复选框收音机刷新页面的函数。这是我调用来尝试解决问题的函数:
function SetSearchFormState() {
if ($.cookie('cmdSearchForm') != null) {
//$('#searchParamsDiv').hide();
var formData = JSON.parse($.cookie('cmdSearchForm'));
$('#SearchText').val(formData.SearchText);
// Set all search buttons to not selected.
$('.searchBtn').each(function () {
$(this).prop('checked', false);
RefreshCheckboxRadio(this, false);
});
// Set the appropriate search button selected.
$('#hidSearch').val(formData.hidSearch);
switch (formData.hidSearch) {
case 'Opportunity':
$('#btnOpportunity').prop('checked', true);
RefreshCheckboxRadio($('#btnOpportunity'), true);
break;
case 'Company':
$('#btnCompany').prop('checked', true);
RefreshCheckboxRadio($('#btnCompany'), true);
break;
case 'Contact':
$('#btnContact').prop('checked', true);
RefreshCheckboxRadio($('#btnContact'), true);
break;
}
// Set all status buttons to not selected.
$('.statusBtn').each(function () {
$(this).prop('checked', false);
RefreshCheckboxRadio(this, false);
});
// Set the appropriate status button selected.
$('#hidStatus').val(formData.hidStatus);
switch (formData.hidStatus) {
case 'Lead':
$('#btnLead').prop('checked', true);
RefreshCheckboxRadio($('#btnLead'), true);
break;
case 'Prospect':
$('#btnProspect').prop('checked', true);
RefreshCheckboxRadio($('#btnProspect'), true);
break;
case 'Customer':
$('#btnCustomer').prop('checked', true);
RefreshCheckboxRadio($('#btnCustomer'), true);
break;
}
// Set the appropriate include button selected.
$('#hidAllUsers').val(formData.hidAllUsers);
$('#btnAllUsers').prop('checked', false);
RefreshCheckboxRadio($('#btnAllUsers'), false);
if (formData.hidAllUsers == 'True') {
$('#btnAllUsers').prop('checked', true);
RefreshCheckboxRadio($('#btnAllUsers'), true);
}
$('#hidDead').val(formData.hidDead);
$('#btnDead').prop('checked', false);
RefreshCheckboxRadio($('#btnDead'), false);
if (formData.hidDead == 'True') {
$('#btnDead').prop('checked', true);
RefreshCheckboxRadio($('#btnDead'), true);
}
//$('#searchParamsDiv').show();
$("input[type='radio']").checkboxradio("refresh");
$("input[type='checkbox']").checkboxradio("refresh");
}
};
这是我从 jQuery mobile 的 checkboxradio 刷新方法中提取的函数:
function RefreshCheckboxRadio(control, value) {
if ($(control).is(':radio')) {
var parent = $(control).parent('div');
var controlId = $(control).attr('id');
var label = $(parent).find("label[for='" + controlId + "']");
var icon = $(label).find(".ui-icon");
//$(parent).hide();
if (value == false) {
$(control).removeAttr('checked');
$(label).removeClass('ui-radio-on ui-button-active').addClass('ui-radio-off');
$(icon).removeClass('ui-icon-radio-on').addClass('ui-icon-radio-off');
} else if (value == true) {
$(control).attr('checked', 'checked');
$(label).addClass('ui-radio-on ui-button-active').removeClass('ui-radio-off');
$(icon).addClass('ui-icon-radio-on').removeClass('ui-icon-radio-off');
}
//$(parent).show();
} else if ($(control).is(':checkbox')) {
var parent = $(control).parent('div');
var controlId = $(control).attr('id');
var label = $(parent).find("label[for='" + controlId + "']");
var icon = $(label).find(".ui-icon");
//$(parent).hide();
if (value == false) {
$(control).removeAttr('checked');
$(label).removeClass('ui-checkbox-on ui-button-active').addClass('ui-checkbox-off');
$(icon).removeClass('ui-icon-checkbox-on').addClass('ui-icon-checkbox-off');
} else if (value == true) {
$(control).attr('checked', 'checked');
$(label).addClass('ui-checkbox-on ui-button-active').removeClass('ui-checkbox-off');
$(icon).addClass('ui-icon-checkbox-on').removeClass('ui-icon-checkbox-off');
}
// $(parent).show();
}
};
运行此代码后,我可以看到值是正确的,并且与调用 checkboxradio('refresh') 时的值完全相同。因此,即使我无法让 checkboxradio 工作,手动执行工作应该可以工作,事实上,当我在 Firebug 中查看更改时,控件仍然不会改变它们的外观。