Jquery移动转换复选框选择在Jquery onclick函数（）中第二次不起作用？答案

【问题标题】：Jquery mobile transition checkbox select does not work second time in Jquery onclick function()?Jquery移动转换复选框选择在Jquery onclick函数（）中第二次不起作用？
【发布时间】：2016-05-04 14:11:41
【问题描述】：

我无法根据文本框中的 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>

【问题讨论】：

你能用输出的html更新你的sn-p吗（例如input而不是asp:TextBox）
@MoshFeu - 请检查。
这似乎对我有用.. i.stack.imgur.com/R1MEv.png
@MoshFeu - 你修改了什么吗？，因为同样对我不起作用。
您使用哪种浏览器？无论如何，我认为您需要将输入放在a#btnShowRates 之外（首先为什么要放在那里）。

标签： javascript jquery html jquery-mobile-checkbox

【解决方案1】：

我发现了问题，这是因为我在选中复选框后没有写入刷新，因此必须添加刷新以通过 Jquery 或 Javascript 选中和取消选中移动复选框。查看下面是刷新功能的详细信息

refresh()返回：jQuery（仅限插件）更新复选框收音机。如果您通过 JavaScript 操作 checkboxradio，您必须调用它的 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'); }
   
    });

【讨论】：