1

2 つの項目を含むチェックボックス リストがあります。JavaScript を使用して 2 つのチェックボックス リスト項目を切り替えるのに苦労しています。一方をクリックしたいのですが、もう一方がすでにチェックされている場合は、チェックマークが消えます。以下は、チェックボックスリストのマークアップです。

<asp:CheckBoxList ID="chkApplyLimits" runat="server" RepeatColumns="2" ClientIDMode="Static" onclick="CheckBoxToggle">
   <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:CheckBoxList>

トグルを有効にするために、次の JavaScript 関数を使用しています。JavaScript では、基本的に親のすべての子要素を取得し、それらをループ処理して、すべての子要素の checked プロパティを false に設定します。最後に、クリックされたアイテムのcheckedプロパティをtrueにしています。

 function CheckBoxToggle(event) {
     if (event.srcElement.type == 'checkbox') {
         var childNodes = event.srcElement.parentNode.childNodes;
         for (var i = 0; i < childNodes.length; i++) {
             childNodes[i].setAttribute("checked", false);
         }
         event.srcElement.checked = true;
     }
 }

最初に何もチェックされていない場合、これは正常に機能します。ただし、2回目にクリックすると、両方のチェックボックスがオンになります。1つのチェックボックスがすでにクリックされている場合、2番目のチェックボックスをクリックするとチェックが解除されるように、これを変更する方法を教えてください。

どんな助けでも大歓迎です。

4

2 に答える 2

-1

このコードを確認してください。これで問題が解決します。

<asp:CheckBoxList ID="chkApplyLimits" runat="server" RepeatColumns="2" onclick="SetCheckboxListSingle('chkApplyLimits')">
   <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:CheckBoxList>

function SetCheckboxListSingle(cblId) {
            $('#' + cblId).find('input[type="checkbox"]').each(function () {
                $(this).bind('click', function () {
                    var clickedCbxId = $(this).attr('id');
                    $('#' + cblId).find('input[type="checkbox"]').each(function () {
                        if (clickedCbxId == $(this).attr('id'))
                            return true;

                        document.getElementById($(this).attr('id')).checked = false;

                    });
                });
            });
        }
于 2013-10-29T07:56:29.247 に答える