javascript - jQuery 移动 : how to add a checkbox in header of collapsible item

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)。