渲染 jQuery Mobile 复选框的问题答案

【问题标题】：Issue with rendering jQuery Mobile Checkboxes渲染 jQuery Mobile 复选框的问题
【发布时间】：2013-08-12 04:50:09
【问题描述】：

我在 div 标记内动态呈现 jQuery 移动复选框。我面临的问题是第一次呈现复选框时它们看起来很小，而当第二次加载同一页面时，复选框会正确呈现。

以下是示例截图：

首次加载：

第二次加载：

任何人都可以帮助解决这个问题的jQuery Mobile Checkboxes。

下面是我的单个复选框的渲染代码：

      xmlArr += '<table id="technologyAreas" border="0" style="width: 100%; margin: 0px; padding: 0px; background : #F0EFED">';
            xmlArr += '<tr><td style="width: 55%;background : #F0EFED">';
            xmlArr += '<fieldset id="techAreasCB" data-role="controlgroup" name="technologyAreasCheck" style="background : #F0EFED">';
            xmlArr += '<legend style="font-style: bold; font-size:16px;background : #F0EFED;width:100%"><label style="background : #F0EFED"><b>Areas<b>:</label></legend>';
     xmlArr += '<tr><td><div style="width:100%; background:#F0EFED;"><input type="checkbox" data-mini="true" name="category'+item.categoryid+'" id="checkbox'+item.categoryid+'"  class="techAreasCheckBox" checked="checked"/></td><td class="myTD" style="padding-left:25px;"><label class="techAreasLabel" style="font-weight:100">'+item.categoryname+'</label></div></td></tr>';
 xmlArr += '</fieldset></td></tr></table>';

是否可以删除 jQuery Mobile Checkbox CSS？

【问题讨论】：

Ps：即使内容没有动态呈现也会发生这种情况。

标签： jquery html jquery-mobile checkbox rendering

【解决方案1】：

可以使用 data-role="none" 属性覆盖 jQuery CSS。

阻止样式的属性是 data-role="none"

<input type='checkbox' style='display:none' data-role="none" />

请参阅 Jquery 文档：“防止表单元素的自动初始化”

这对我有用:)

【讨论】：