Jquery移动转换复选框在Jquery onclick函数()中第二次选中不起作用

Question

我无法根据文本框中的Id第二次选中复选框，Id从文本框中传递的信息用逗号（，）分隔，如（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。如果通过JavaScript操作checkboxradio，则必须调用其上的刷新方法来更新视觉样式。

所以我修改的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'); }
   
    });