2013-03-19 238 views
0

我有一個關於複選框啓用和禁用的問題。jQuery複選框啓用禁用

如果選中複選框,則應禁用「個人培訓」。

但我不能這樣做

Here's a Fiddle

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

}); 

你能幫幫我嗎?

在此先感謝

+0

但是你的複選框沒有'class'屬性... – Anujith 2013-03-19 16:57:53

+2

你認爲'this.className'是什麼? – j08691 2013-03-19 16:58:36

+0

添加以下行:alert(this.className); – 2013-03-19 16:59:13

回答

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

0

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

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

這是你想要的嗎?

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

您沒有該複選框的類或ID。我想你想要複選框的「optionen」的ID。然後你也想刪除對類的引用,除非你想在複選框中添加一個類。

0

你有兩個明顯的解決方案,第一個給inputleaf類:

<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

參考文獻:

+0

感謝這對我很有幫助 – aldimeola1122 2013-03-19 17:19:29

+0

@ aldimeola1122 if this answer解決您的問題,請點擊左側的檢查標記它 – snumpy 2013-05-29 15:40:49