jQuery复选框启用禁用

Question

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

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

但我不能这样做

Here's a Fiddle。

$('#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 Fiddle demo。

二是纠正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 Fiddle demo 。

参考文献：

• closest()。
• find()。