Refreshing 2 form elements in jQuery Mobile doesn't work?

Question

I have a jQuery Mobile application with a form. The form has multiple form elements when someone fills in the form it is stored in the localStorage.

After you filled in one form you can lookup the old one on a history page. When someone opens a old form the form elements needs to be filled in according to the localStorage information. I have got this working with the first dropdown lists but when I add checkboxes to the page only the dropdown boxes refreshes.

My JavaScript code:

if (key !== "")
{
    key = key.replace("?key=", "");

    var string = localStorage.getItem(key);
    var array = string.split(",");

    $("#client option[value='" + array[0] + "']").attr("selected", "selected");
    $("#location option[value='" + array[1] + "']").attr("selected", "selected");
    $("#locationnumber option[value='" + array[2] + "']").attr("selected", "selected");

    $("#turbine_id option[value='" + array[3] + "']").attr("selected", "selected");
    $("#turbine_type option[value='" + array[4] + "']").attr("selected", "selected");
    $("#turbine_brand option[value='" + array[5] + "']").attr("selected", "selected");

    $('select').selectmenu('refresh'); //This is the refresh method

    $('#check_maintenance').attr('checked', true);
    $('#check_failure').attr('checked', false);
    $('#check_inspection').attr('checked', true);
    $('#check_warranty').attr('checked', false);
    $('#check_assignment').attr('checked', true);
    $('#check_reportedbyclient').attr('checked', false);
    $('#check_management').attr('checked', true);
    $('#check_restpoint').attr('checked', false);
    $('#check_report').attr('checked', true);

    $('input:checkbox').checkboxradio('refresh'); //This is the refresh method
}

It seems to be that refreshing two or more different form elements in one function can't be done. Maybe someone else knows the correct or a better way to do this.

---

EDIT:

Thanks for your anwser Omar. But what seems to be the problem is that when I refresh my Select menu the rest of the function isn't executed.

This is how I refresh a couple of html menus

$('select').selectmenu('refresh');

everything I put below this line isn't executed.

Answer 1

Edit

To select an option in selectmenu, use the below.

$('#selectmenu_id option:eq(N)').prop('selected',true);
$('#selectmenu_id') .selectmenu('refresh');

Where N is the index number of the option.

---

You need to use .prop() and then refresh each checkbox.

Demo

This will uncheck all checkboxes at once.

$('[type=checkbox]').prop('checked', false).checkboxradio('refresh');

This will go though each checkbox, in case you want to check/uncheck specific ones.

var checkboxes = $.mobile.activePage.find('[type=checkbox]');

$.each(checkboxes, function () {
  $(this).prop('checked', false).checkboxradio('refresh');
});