0

我有一个关于启用和禁用复选框的问题。

如果我选中该复选框，则应禁用“个人培训”。

但我做不到

这是一个小提琴。

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

});

你能帮助我吗？

提前致谢

4

3 回答 3

0 
$('#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

于 2013-03-19T17:00:50.430 回答
0

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

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

那是你要的吗？

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

您没有带有复选框的类或 ID。我认为您想要带有复选框的“optionen”的ID。然后您还想删除对类的引用，除非您想在复选框内添加一个类。

于 2013-03-19T17:01:17.093 回答
0

你有两个明显的解决方案，第一个给出input类leaf：

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

JS 小提琴演示。

第二个是更正HTML（ a （或）的唯一有效子元素是an ）：ulolli

<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 小提琴演示。

参考：

于 2013-03-19T17:01:31.850 回答