Question

我创建了一个包含7个复选框的html。问题是当我在浏览器中运行它时工作正常但不能使用真实设备。

<!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>

Answer 1

将此添加到您的css

＆＃13;

label > * {
pointer-events: none;
}

＆＃13;

Answer 2

移动使用min-height;最小宽度属性

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

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

复选框在真实设备中不起作用，但在浏览器中使用phonegap

2 个答案: