【问题标题】：combine checkbox with jquery mobile listview将复选框与 jquery mobile listview 结合使用
【发布时间】：2012-11-29 18:50:51
【问题描述】：

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

http://tinyurl.com/ctvko27

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

问候，伊沃

【问题讨论】：

标签： listview jquery-mobile checkbox

【解决方案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。它附带了许多工作示例，包括为什么 !important 对于 jQuery Mobile 是必需的。

【讨论】：

哇，这实际上比我最初想象的要复杂得多。非常感谢您的回答和当之无愧的接受答案。

【解决方案2】：

有几种方法可能有效。您可以尝试放置超链接<a /> 标记的复选框头。您还可以禁用复选框上的自动增强功能。从根本上讲，您将遇到触摸事件以及两个控件的任何重叠问题。

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

【讨论】：

感谢您的回复。与我的图像相反，列表项将不可点击（不可嵌套），因此我认为我不会遇到两个控件重叠的问题。不幸的是，您建议的标记会导致一个小的、无样式的复选框。

【解决方案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);

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

【讨论】：