Jquery mobile transition checkbox select does not work second time in Jquery onclick function()?

Question

I am not able select the checkboxes second time on the basis of its Id's in textbox, Id's passes from textbox is separated by comma (,) like (1,2,3,..). First time when page gets load everything works fine for me but then when I uncheck the checkboxes and again tried to check those on anchor tag click it doesn't work. Appreciate any help.

$(document).on("click", "a[id$='btnShowRates']", function (e) {       
  if ($('input[type=text][id$=rate]').val() != "") {
    var arrate = $('input[type=text][id$=rate]').val().split(',');
    var targetcheckboxes = $.map(arrate, function (i) { return document.getElementById(i) });
    $(targetcheckboxes).prop('checked', true);                                   
  }
  else { $('[id$=listRates] input[type=checkbox]').prop('checked', false); }                   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="controlgroup">
  <a id="btnShowRates" href="#pgRates" data-transition="slideup" data-role="button" runat="server">
    <span class="left ad_option_text small_text"><%=MBBE_Revamped.Labels.GetLabel(langID, hotel, "RateCorpCode") %></span>
    <input id="rate" type="text" />
  </a>
  <section id="pgRates" data-role="page" data-theme="a">
    <bhead:custHead id="CustHead1" runat="server" />
    <header data-role="header" class="mbe_detail_header">
      <p class="nospace">Hotel Rates</p>
    </header>
    <div data-role="content">
      <fieldset data-role="controlgroup" id="listRates" data-icon="false" runat="server">
        <--! Here comes dynamic checkboxes -->
          <div style='position:relative;'>
            <input type='checkbox' id='1' data-display-name='Rack/General' />
            <label for='1'>Rack/General</label>
            <img id='img_1' class='checkboxFixIconLeft' />
          </div>
          <div style='position:relative;'>
            <input type='checkbox' id='4' data-display-name='Government' />
            <label for='4'>Government</label>
            <img id='img_4' class='checkboxFixIconLeft' />
          </div>
          <div style='position:relative;'>
            <input type='checkbox' id='6' data-display-name='Package' />
            <label for='6'>Package</label>
            <img id='img_6' class='checkboxFixIconLeft' />
          </div>
          <!-- End -->
          </fieldset>
        <div class="btn_container">
          <a data-role="button" data-theme="b" data-rel="back">Confirm</a>
        </div>
        </div>
      </section>
    </div>

Answer 1

I have found the Issue,It is happening because I do not write a refresh after check the checkbox it is mandatory to add refresh to check and uncheck the Mobile Checkbox through Jquery or Javascript. check below is the refresh function details

refresh()Returns: jQuery (plugin only) update the checkboxradio. If you manipulate a checkboxradio via JavaScript, you must call the refresh method on it to update the visual styling.

So My modified jquery function is -

 $(document).on("click", "a[id$='btnShowRates']", function (e) {  
   
       if ($('input[type=text][id$=rate]').val() != "") {
            var arrate = $('input[type=text][id$=rate]').val().split(',');
            var targetcheckboxes = $.map(arrate, function (i) { return document.getElementById(i) });
            $(targetcheckboxes).prop('checked', true).checkboxradio('refresh');
           
            for (var i in targetcheckboxes) {               
                setCustomChecked(true, $(document).find('input[type="checkbox"]:checked'));
            }                         
        }
   
       else { $('[id$=listRates] input[type=checkbox]').prop('checked', false).checkboxradio('refresh'); }
   
    });