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圖片如下：

該款顯示器的複選框，但不允許檢查事件時點擊，因爲它在允許之前首先打開標籤。

我已經嘗試使用以下：

$("#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"，但即使如此，它也無法工作，因爲您無法阻止kendo選擇面板。

即使

$("#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-件觸發一個單獨的行動，所以現在你可以用

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