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>

Can you update your snippet with the output html (`input` instead of `asp:TextBox` for example) — Mosh Feu, May 03 '16 at 12:58
It's seems to work for me.. http://i.stack.imgur.com/R1MEv.png — Mosh Feu, May 03 '16 at 13:19
@MoshFeu - did you modify anything?, because same is not working for me. — Rahul Hendawe, May 03 '16 at 13:31
Which browser do you use? Anyway, I think that you need to put the input outside of the `a#btnShowRates` (Why it there in the first place). — Mosh Feu, May 03 '16 at 13:51
I have tried this on IE11,Chrome,Firefox. I didn't know how to put the input outside of the a#btnShowRates as Jquery is new for me, can you please modify the function and post it back? — Rahul Hendawe, May 04 '16 at 04:41
I mean in the `html` - why the `input` in the `a` tag? http://i.stack.imgur.com/zJFkl.png — Mosh Feu, May 04 '16 at 06:43

score 0 · Accepted Answer · answered May 04 '16 at 06:11

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

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

1 Answers1