Css - 复选框上的自定义样式不起作用

Question

首先,我有一个剑道网格.现在我动态地向DataSource添加一个复选框,如下所示:

var chkBox =  "<input type='checkbox' id='chUpload'/><label for='chUpload'><a href='#' id='cbChoose'></a>test</label>";

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

以下是复选框上实现的样式:

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

input[type="checkbox"] + label a
{
    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 a 
{
    background:url('../images/checkBox.png') -1px top no-repeat;
}

我发现这些样式适用于我添加到面板栏选项卡的其他复选框,但在网格中,没有显示任何内容.

我创建了一个jsfiddle,黑盒子是样式复选框.我已经隐藏display:none;在CSS中以查看所有文本框的位置.如果正在使用,则不会在网格中显示检查自定义框.

有什么想法吗？

Answer 1

我发现了问题。

template: "<input type='checkbox' style='margin-right:23px; margin-top:0px;'  />"

应该：

template: "#= selected #"

这是我的一个简单错误。

这是一个工作示例。