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 値はforloopvariableです。

チェックボックスで次のスタイルを使用しました。

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 アクションを使用して親から子をバインド解除することです。そのため、剣道ハンドラーはトリガーされません。

解決：

テンプレートで置き換えます

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

と

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

そしてあなたの入力cssでspanwith 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 に答える