jQuery Mobile-过滤复选框的列表视图会导致出现无样式的复选框
jQuery Mobile - Filtering a Listview of Checkboxes causes unstyled checkboxes to appear
这里是长期读者和首次发布者,对jQuery/jQM来说有些陌生。
我有一个表单,其中包含一个带有数据过滤器的Listview,其中每个列表项都包含一个复选框。当我在筛选框中键入并筛选项目时,背景中会出现额外的无样式复选框。以下是代码示例:
<div data-role="content">
<ul data-role="listview">
<fieldset data-role="controlgroup" id="myGroup" data-filter="true" data-icon="false">
<li>
<input type="checkbox"
name="itemIds"
id="228"/>
<label for="228">
Orange
</label>
</li>
<li>
<input type="checkbox"
name="itemIds"
id="70"/>
<label for="70">
Red
</label>
</li>
<li>
<input type="checkbox"
name="itemIds"
id="71"/>
<label for="71">
Blue
</label>
</li>
<li>
<input type="checkbox"
name="itemIds"
id="72"/>
<label for="72">
Purple
</label>
</li>
</fieldset>
</ul>
</div>
我最初认为问题在于我动态生成列表的方式(即,我认为我一定得到了重复的复选框,因为未格式化的复选框对应于我列表中的项目),但我能够使用上面jsfiddle中的简单代码示例重现问题:http://jsfiddle.net/KsRb2/2/
任何帮助都将不胜感激。谢谢
此行为是jQM 1.4.0 alpha 2中的一个错误。您应该更新到1.4.0 RC1,并删除ul和li标记,因为此列表只能是listview或controlgroup,不能两者都是。这将是最终的HTML:
<div data-role="content">
<fieldset data-role="controlgroup" id="myGroup" data-filter="true" data-icon="false">
<input type="checkbox"
name="itemIds"
id="228"/>
<label for="228">
Orange
</label>
<input type="checkbox"
name="itemIds"
id="70"/>
<label for="70">
Red
</label>
<input type="checkbox"
name="itemIds"
id="71"/>
<label for="71">
Blue
</label>
<input type="checkbox"
name="itemIds"
id="72"/>
<label for="72">
Purple
</label>
</fieldset>
</div>
你可以在这里试试小提琴:http://jsfiddle.net/KsRb2/5/
li .ui-checkbox input{
visibility: hidden;
}
这是你最新的小提琴:http://jsfiddle.net/ezanker/KsRb2/4/
实际上,您只需要向字段集添加数据过滤器show="true"。无需使用CSS。
相关文章:
- 如果选中复选框,则添加样式
- 带有jQuery ui主题的自动样式复选框
- 未使用jQuery验证器选中Css样式复选框时
- Javascript选中一个表中的所有复选框,该表的行具有样式显示标记
- 使用相同的CSS样式创建多个复选框
- jQuery Mobile-过滤复选框的列表视图会导致出现无样式的复选框
- 更改复选框列表项样式
- 样式为 -webkit-外观的单选按钮:复选框:Chrome 中的不确定状态
- 鼠标按下和鼠标悬停事件的样式复选框
- jQuery 使用样式化的无线电和复选框验证插件
- 选择样式格式中的所有或某些父/子复选框
- 动态设置复选框标签文本会导致复选框中的样式问题
- 将父样式更改应用于组中的所有复选框;全部检查”;运行javascript函数
- 使用jquery更改复选框的样式
- 平面UI复选框样式不起作用
- 样式复选框
- 如何使用angularjs中的自定义指令,使用Unform jQuery插件设置浏览器默认复选框的样式
- 为什么我的复选框样式不起作用
- 设置复选框样式的Angular指令
- jQuery复选框样式问题