解决方案

Question

我想在listview单元格中使用jqm样式复选框。我已经制作了一张合成图片来显示所需的最终结果：

每当我使用带有标签的jqm复选框时，它会从框架中获得一个很大的样式，这是我不想要的。我不想使用fieldset功能，因为它们总是插入，我需要列表为100％宽度。我希望能够使用完全样式的复选框作为我的listview单元格的一部分。我希望我的问题很清楚，有人可以提供一些指导。

此致 IVO

Answer 1

解决方案

这是一个适合你的解决方案，我有空闲时间，所以这里是：http://jsfiddle.net/Gajotres/ek2QT/

Javascript代码：

首先在pagebeforeshow上选择/取消选中我们的自定义复选框。

$('#index').live('pagebeforeshow',function(e,data){
    $('input[type="checkbox"]').each(function(){
        ($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');   
    });
});

此部分将处理复选框更改状态。

$('.checkBoxLeft').bind('click', function(e) {
    if($(this).find('input[type="checkbox"]').is(':checked')){
        $(this).removeClass('checked').addClass('not-checked');
        $(this).find('input[type="checkbox"]').attr('checked' , false);
    } else {
        $(this).removeClass('not-checked').addClass('checked');             
        $(this).find('input[type="checkbox"]').attr('checked' , true);
    }
});

在示例中休息了css，可以找到用于自定义状态的img here：

最后的笔记

如果您想了解有关如何自定义jQuery Mobile页面和小部件的更多信息，请查看 article 。它附带了许多工作示例，包括为什么是jQuery Mobile必不可少的。

Answer 2

有两种方法可行。您可以尝试放置超链接<a />标记的复选框头。您也可以禁用复选框上的自动增强功能。从根本上说，你会遇到触摸事件和两个控件重叠的问题。

<input type="checkbox" data-role="none" />

Answer 3

尝试使用Gajotre的解决方案与最新版本的jquery（1.9.1）+ jquerymobile（1.3.2），但不幸的是它没有用。

你必须改变

$(this).find('input[type="checkbox"]').attr('checked' , false);
$(this).find('input[type="checkbox"]').attr('checked' , true);

到

$(this).find('input[type="checkbox"]').prop('checked' , false);
$(this).find('input[type="checkbox"]').prop('checked' , true);

否则您只能将复选框“已选中”更改一次。

将复选框与jquery移动列表视图结合使用

3 个答案:

解决方案

最后的笔记