jQuery復選框啟用禁用

Question

我有一個關於啟用和禁用復選框的問題。

如果我選中此復選框，則應禁用“個人培訓”。

但是我做不到

這是小提琴 。

$('#optionen :checkbox').on('change', function () {
    $('.menu li.' + this.className).toggleClass('hide');

});

你能幫助我嗎？

提前致謝

Answer 1

$('#optionen :checkbox').on('change', function(){

這意味着“查找#optionen ，然后找到它的后代所有復選框”。 找到以下元素：

<input type="checkbox">

然后，您將事件處理程序綁定到此元素。 在事件處理程序內， this指向元素。 事件處理程序將查找元素的className屬性。 沒有設置class屬性，因此className是一個空字符串。 因此，您的代碼實際上如下所示：

$('.menu li.').toggleClass('hide');

這顯然是一個無效的選擇器，因此有錯誤，並且什么也沒有發生。

我不確定您的解決方案是什么； 就像將class屬性添加到input元素中一樣簡單：

<input type="checkbox" class="leaf">

jsFiddle

Answer 2

http://jsfiddle.net/nhhQz/10/

$('#optionen :checkbox').on('change', function(){
    $('.menu li').toggleClass('versteckt');
});

那是你要的嗎？

<input type="checkbox" id="optionen">

您的復選框沒有課程或ID。 我認為您想要帶有復選框的“ optionen”的ID。 然后，您還希望刪除對該類的引用，除非您要在復選框內添加一個類。

Answer 3

您有兩個顯而易見的解決方案，第一個為input提供了leaf類：

<span><input class="leaf" type="checkbox" />SERVICES</span>

JS小提琴演示 。

第二個方法是更正HTML（ ul （或ol ）的唯一有效子元素是li ）：

<div id="optionen">
    <ul>
        <li><span><input type="checkbox" />SERVICES</span>

            <ul class="menu">
                <li class="first leaf"><a href="/site/personal_training">PERSONAL TRAINING</a>

                </li>
                <li class="leaf"><a href="/site/personal_training">PERSONAL TRAINING</a>

                </li>
                <li class="leaf"><a href="/site/personal_training">PERSONAL TRAINING</a>

                </li>
            </ul>
        </li>
    </ul>
</div>

然后使用：

$('#optionen :checkbox').on('change', function () {
    $(this).closest('li').find('ul.menu li').toggleClass('versteckt');
});

JS小提琴演示 。

參考文獻：

• closest() 。
• find() 。