Как изменить jQgrid на основе флажков?

Question

У меня есть jQgrid, и я хочу позволить пользователю выбирать, какой из них будет отображаться на странице, с помощью флажков или переключателей.

Я не могу просто поставить его частично, потому что он находится в теге script .

Есть ли способ добиться этого?

Обновление:

У меня есть эти два jQgrid

jQuery("#datatable").jqGrid({
              url: "/user/details",
              serializeGridData: function(data) {
                  var Data = jQuery.extend(data, {
                      _search: "true",
                      date_from: function() { return jQuery("#date_from").val(); },
                      date_to: function() { return jQuery("#date_to").val();
                  });
                  return jQuery.param(Data);
              },
              ajaxGridOptions: {async: true},
              ajaxCellOptions: {async: true},
              ajaxRowOptions: {async: true},
              mtype: "POST",
              datatype: "local",
              overlay: "false",
              jsonReader: {repeatitems: false},
              pager: '#grid',
              rowEdit: true,
              colNames:['id','Name','Surname', 'Age', 'Company'],
              colModel:[
                  {name:'id',key:true,hidden:true,width:0,index:'id', sorttype:"int", editable: false, align:'left',search:true},
                  {name:'name',width:175,sortable:true, align:'left',search:true},
                  {name:'surname',fixed:true,width:250,sortable:true, align:'left',search:true},
                  {name:'age',width:0,index:'item_code', sorttype:"int", editable: false, align:'left',search:true},
                  {name:'company',width:300,sortable:true, align:'left',search:true},
              ],

                  jQuery('[id^="gs"]').attr("placeholder", "Search...");
              },
              rownum:500,
              rowNum:500,
              rowList:[500, 1000],
              shrinktofit: true,
              forcefit: false,
              autowidth:true,
              sortname: 'projects',
              sortorder: "desc",
              height: "380",
              ignoreCase: true,
              viewrecords: true,
              caption:""
        }

и

jQuery("#datatable").jqGrid({
              url: "user/settings",
              serializeGridData: function(data) {
                  var newPostData = jQuery.extend(data, {
                      _search: "true",
              ajaxGridOptions: {async: true},
              ajaxCellOptions: {async: true},
              ajaxRowOptions: {async: true},
              mtype: "POST",
              datatype: "local",
              overlay: "false",
              jsonReader: {repeatitems: false},
              loadonce: false,
              pager: '#grid',
              rowEdit: true,
              colNames:['id','User','Settings'],
              colModel:[

               {name:'id',key:true,hidden:true,width:0,index:'id', sorttype:"int", editable: false, align:'left',search:true},
               {name:'user',fixed:true,width:1450,sortable:true, 
               align:'left',search:true},
               {name:'settins',fixed:true,width:1450,sortable:true, align:'left',search:true},

              rownum:500,
              rowNum:500,
              rowList:[500, 1000],
              shrinktofit: true,
              forcefit: false,
              autowidth:true
                 }

И 2 флажка

<input type="checkbox" class="value">
<input type="checkbox" class="value">

Вопрос в том, как отобразить эти 2 jQgrid на основе этих двух чекбоксов:

Это означает, что если флажок 1 установлен, будет показана первая сетка jQuery, если установлен флажок 2, будет показана вторая сетка jQuery и т. Д.