check box not working in real device but work in browser for phonegap

Question

I have created a html that has 7 check boxes. The problem is when i am running it in browser it work fine but not working with real device.

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ZONE 2 PAGE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/overlay.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />


<script type="text/javascript" src="cordova.js"></script>

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<script>
var d = document;
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
onload = function() {

    var body = gebtn(d,'body')[0];
    body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';

    if (!d.getElementById || !d.createTextNode) return;
    var ls = gebtn(d,'label');
    for (var i = 0; i < ls.length; i++) 
    {
        var l = ls[i];
        if (l.className.indexOf('label_') == -1) continue;
        var inp = gebtn(l,'input')[0];
        if (l.className == 'label_check') 
        {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
            l.onclick = check_it;
        };
        if (l.className == 'label_radio')
         {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
            l.onclick = turn_radio;
        };
    };
};
var check_it = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
        this.className = 'label_check c_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_check c_off';
        if (safari) inp.click();
    };
};
var turn_radio = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_radio r_off' || inp.checked) {
        var ls = gebtn(this.parentNode,'label');
        for (var i = 0; i < ls.length; i++) {
            var l = ls[i];
            if (l.className.indexOf('label_radio') == -1)  continue;
            l.className = 'label_radio r_off';
        };
        this.className = 'label_radio r_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_radio r_off';
        if (safari) inp.click();
    };
};
</script>


 </head>
 <body >
 <div id="zone-full" class="wrapper apptab history clearfix" >

  <div id="apptab1" class="apptab_content" > 

  <div>

    <div class="zone2">
        <ul class="white-area">

          <li class="clearfix"><strong>Geldt voor</strong></li>
            <li>
            <div data-role="fieldcontain"  id="chk_week" >
               <fieldset data-role="controlgroup">
                  <label class="label_check" id="l1" for="ch1">Ma<input         
class="custom" type="checkbox" name="aa" id="ch1" value="Ma" onchange="func('2-1')" />   </label>
                <label class="label_check" id="l2" for="ch2">Di<input class="custom" type="checkbox" name="aa" id="ch2" value="Di" onchange="func('1-2')" /></label>
                <label class="label_check" id="l3" for="ch3">Woe<input class="custom" type="checkbox" name="aa" id="ch3" value="Woe" onchange="func('1-2')" /></label>
                <label class="label_check" id="l4" for="ch4">Do<input class="custom" type="checkbox" name="aa" id="ch4" value="Do" onchange="func('1-2')" /></label>
                <label class="label_check" id="l5" for="ch5">Vr<input class="custom" type="checkbox" name="aa" id="ch5" value="Vr" onchange="func('1-2')" /></label>
                <label class="label_check" id="l6" for="ch6">Za<input class="custom" type="checkbox" name="aa" id="ch6" value="Za" onchange="func('1-2')" /></label>
                <label class="label_check" id="l7" for="ch7">Zo<input class="custom" type="checkbox" name="aa" id="ch7" value="Zo" onchange="func('1-2')" /></label>
            </fieldset>
            </div>

            </li>
            <li></li>
            <li><strong >Herhaal</strong></li>
            <li>

             <div id="chk_week">
                <label style="height:26px; margin:0 0 10px 0;" class="label_check" id="l8" for="ch8"><input type="checkbox" id="ch8" value="8" onchange="func('1-2')" /></label>
            </div> 

            </li>
            <li><input type="submit" name="Voeg zone toe" value="Voeg zone toe" onclick="calert();" /></li>
        </ul>
    </div><!-- end of zone2 -->
</div><!-- end of apptab_content -->
</div><!-- end of apptab_content -->
</div>

 <script type="text/javascript">

 function calert()
 {  
  var arr = [];
  $('input:checkbox[name=aa]').each(function() 
  {    
      if($(this).is(':checked'))
        arr=arr+$(this).val();
  });
  alert(arr);
 }


</script>
</body>
</html>

I have tested your code in my device and browser , which event is not working? — Ved, Dec 12 '13 at 12:48
I can't tell you the exact problem but I would suggest that test the normal check box removing all dependent CSS and js, if it works well then there might be issue with the css or js ...also check the meta tag. — Anand Jha, Dec 12 '13 at 13:51
http://jsfiddle.net/SaKM2/15/ try this. basically whatever your click code is use it in document ready function let me know if you need anything else — Rohit Tiwari, Dec 12 '13 at 14:19

score 3 · Answer 1 · answered Jul 18 '17 at 15:17

3

add this to your css

label > * {
pointer-events: none;
}

answered Jul 18 '17 at 15:17

mcnk

1,690
3
20
29

Adding a onClick("alert('Hello World!')") on the input shows the checkbox being triggered twice. This fix worked for me, thx. – Msmit1993 Sep 25 '17 at 10:11

score 1 · Answer 2 · edited May 23 '17 at 10:24

1

for mobile use min-height; min-width properties

<input type="checkbox" style="min-height:80px;min-width:80px;">

How to increase checkbox size in mobile or tablet browser based web pages?

edited May 23 '17 at 10:24

Community

1
1

answered Apr 14 '15 at 10:20

RouR

6,136
3
34
25

check box not working in real device but work in browser for phonegap

2 Answers2