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。我想你想要带有复选框的“选项”ID。然后你还想删除对类的引用，除非你想在复选框中添加一个类。

Answer 3

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

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

JS Fiddle demo

第二个是更正HTML（ul（或ol）的{em>仅有效子元素是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 Fiddle demo

参考文献：

closest()。
find()。

jQuery复选框启用禁用

3 个答案: