Question

我想在可折叠项目的标题中添加一个复选框。单击复选框时，不应打开可折叠项目。当我点击标签时，它应该打开。

看看我做了什么：http://jsfiddle.net/heidewitzka/UwkWx/34/

$('.ui-icon-checkbox-on').click(function(e) {
  e.stopPropagation();
  $(this).closest('label').attr( "data-icon", "checkbox-off" );
  $(this).addClass('ui-icon-checkbox-off');
  $(this).removeClass('ui-icon-checkbox-on');
  $(this).closest('label').addClass('ui-checkbox-off');
  $(this).closest('label').removeClass('ui-checkbox-on');
});

$('.ui-icon-checkbox-off').click(function(e) {
  e.stopPropagation();
  $(this).closest('label').attr( "data-icon", "checkbox-on" );
  $(this).addClass('ui-icon-checkbox-on');
  $(this).removeClass('ui-icon-checkbox-off');
  $(this).closest('label').addClass('ui-checkbox-on');
  $(this).closest('label').removeClass('ui-checkbox-off');
});

一切正常，但我无法取消选中该复选框。为什么呢？

Answer 1

您已更新 FIDDLE

我在包含复选框的标签上添加了一个ID，然后在标签中找到的.ui-icon上放置一个单击处理程序。在这里，您可以检查当前分配的图标类，然后切换它：

$('#checkBoxLbl .ui-icon').click(function(e) {
    e.stopPropagation();
    if ($(this).hasClass('ui-icon-checkbox-on')) {
        $(this).closest('label').attr("data-icon", "checkbox-off");
        $(this).addClass('ui-icon-checkbox-off');
        $(this).removeClass('ui-icon-checkbox-on');
        $(this).closest('label').addClass('ui-checkbox-off');
        $(this).closest('label').removeClass('ui-checkbox-on');
    } else {
        $(this).closest('label').attr("data-icon", "checkbox-on");
        $(this).addClass('ui-icon-checkbox-on');
        $(this).removeClass('ui-icon-checkbox-off');
        $(this).closest('label').addClass('ui-checkbox-on');
        $(this).closest('label').removeClass('ui-checkbox-off');
    }
});

你遇到的问题是两个处理程序实际上都指向同一个DOM元素（图标SPAN）。

jQuery mobile：如何在可折叠项目的标题中添加一个复选框

1 个答案: