javascript - 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 で を非表示にしました。使用中の場合、グリッドにチェック カスタム ボックスは表示されません。

理由はありますか？