JQuery мобильный флажок перехода не работает второй раз в функции JQuery OnClick ()?

Question

Я не могу установить флажки во второй раз на основе его идентификатора в текстовом поле, проходы идентификатора из текстового поля отделяются запятой (,), как (1,2,3,..). В первый раз, когда страница загружается, у меня все работает нормально, но потом, когда я снимаю флажки и снова пытаюсь проверить те, которые находятся на щелчке тега привязки, это не работает. Ценю любую помощь.

$(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

Я обнаружил проблему, это происходит потому, что я не пишу обновление после флажка, обязательно добавьте обновление, чтобы проверить и снять флажок Мобильный флажок через Jquery или Javascript. проверьте ниже детали функции обновления

refresh() Возвращает: jQuery (только плагин) обновляет checkboxradio. Если вы манипулируете checkboxradio через JavaScript, вы должны вызвать для него метод refresh, чтобы обновить визуальный стиль.

Моя модифицированная функция jquery -

 $(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'); }
   
    });