2

我有这个在添加静态复选框时有效的小提琴。 我正在为手风琴面板创建复选框，如下所示：

liID = "tab" + x;
$("<li id = '"+ liID +"' class='k-item k-last k-state-default' aria-expanded='false'><input type='checkbox' id='c" + x + "' class='cbSelect' /><label for='c" + x + "'><span  id='cbSelect" + x + "'></span>" + liID + "</label></li>").appendTo("#panelbar");

上面的 x 值是for循环variable。

我在复选框上使用了以下样式：

input[type="checkbox"]
{
    display:none;
}

input[type="checkbox"] + label span
{
    display:inline-block;
    width:14px;
    height:14px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/checkBox.png') right top no-repeat;
    cursor:pointer;
    float:right;
    margin-top:10px;
    margin-right:10px;
}

input[type="checkbox"]:checked + label span 
{
    background:url('../images/checkBox.png') -1px top no-repeat;
}

上面的 checkbox.png 图片如下： 在此处输入图像描述

它显示复选框，但在单击时不允许检查事件，因为它在允许之前首先打开选项卡。

我尝试过使用以下内容：

$("#panelbar").on("click", "input.cbSelect", function(evt) 
{
    evt.stopPropagation();
});

但我不确定我是否正确链接它，因为它与我使用隐藏的普通复选框链接display:none;

当普通复选框与新样式的复选框一起显示时，当单击原始复选框时，它会按预期工作。我希望能够单击新创建的复选框并在其上使用 stopPropagation，而不是单击原始复选框。

这是第一个问题，下一个是我正在为这样的网格创建一个复选框：

var chkBox =  "<input type='checkbox' id='cUpload1' class='cbSelect' /><label for='cUpload1'><span  id='cbSelectUpload'></span>test1</label>";

然后尝试将其添加到一个简单的 dataSourse 中，如下所示：

var uploadedFiles = 
[
    { 
        facility: "Sunrise medical Laboratories", 
        documentName:  "Lab Results",
        documentType: "PDF",
        selected: chkBox
    }
];

用于上述复选框的样式未应用于该复选框，因为没有显示任何内容。

任何想法为什么它不起作用？

顺便说一句，我正在尝试将上述所有内容实现到这个小提琴中。上面的编码目前不在小提琴中。

任何帮助将不胜感激！

4

1 回答 1

1

您的第一个问题主要是由于与剑道的互动。选择器"input.cbSelect"不正确，因为您正在用仅标签的复选框替换原始复选框。所以实际上你点击的是标签而不是复选框本身。正确的是，"li label span"但即使那样它也行不通，因为您无法阻止剑道选择面板。

甚至

$("#panelbar").on("click", "label span", function(evt) {
    evt.stopImmediatePropagation();
    return false;
})

不会阻止剑道选择。

但是您实际上可以做的是使用 html 操作将子项与父项解除绑定，因此 kendo 处理程序不会触发：

解决方案：

在您的模板中替换

<span  id='cbSelect" + x + "'></span>

和

<a href="#" id='cbSelect" + x + "'></a>

并在您的输入 css 中span使用a.

a-Element 触发一个单独的动作，所以现在你可以停止剑道处理程序

$("#panelbar").on("click", "label a", function(evt) {
    evt.stopImmediatePropagation();
});

现在的问题是，通过单击标签来检查复选框也不起作用。所以我们必须通过扩展上面的处理程序来手动完成：

$("#panelbar").on("click", "label a", function(evt) {
    var chkbx = $(this).closest('li').find('input');
    chkbx.prop('checked', !chkbx.prop('checked'));
    evt.stopImmediatePropagation();
})

工作示例：http:
//jsfiddle.net/Nitro3k/5nX8r/47/

选择：

如果您不希望标签内的链接，您还可以：

  1. 完全删除跨度，直接设置标签样式并调用return false;而不是evt.stopImmediatePropagation();
  2. 构建一个自定义复选框，因为js无论如何您都必须触发它：

删除标签，改为样式块（例如.checkbox）以及检查的类（例如.checkbox.checked）。围绕复选框构建块：

<div class="checkbox"><input type='checkbox' id='c1' class='cbSelect' /></div>

并添加处理程序：

$(document).on('click', '.checkbox', function(){
    var chkbx = $(this).find('input');
    chkbx.prop('checked', !chkbx.prop('checked'));
    $(this).toggleClass('checked');
})
于 2013-04-16T20:41:16.383 回答