Question

我有这个fiddle，可以在添加静态复选框时使用。 我正在创建手风琴面板的复选框，如下所示：

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图片如下： enter image description here

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

我尝试过使用以下内容：

$("#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
    }
];

上面的复选框使用的样式不会应用于复选框，因为没有显示任何内容。

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

不过，我正在尝试将上述所有内容实现到此fiddle中。 以上编码目前并不是小提琴。

我们将不胜感激任何帮助！

Answer 1

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

即使

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

不会阻止剑道选择。

但你实际上可以做的是使用html动作解除父级与父级的绑定，因此剑道处理程序不会触发：

<强>解决方案：

在模板中替换

<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/

<强>替代：

如果您不想要标签内的链接，您还可以：

完全删除范围，直接设置标签样式，然后拨打return false;而不是evt.stopImmediatePropagation();
构建自定义复选框，因为您必须使用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');
})

Javascript - 动态添加的复选框在Kendo Panelbar标题中无法正常工作

1 个答案: