更新CSS onDomReady嵌套复选框

Question

我有一个从数据库加载正确的数据的一些嵌套的复选框，但是我想就划掉的文本标签被选中的人。它对第二级复选框工作正常，但我一直无法使第一级复选框正常工作。

您可以在这里看到的错误：

http://jsfiddle.net/Zfv7h/3/

$(document).ready(function() { 
    $(".content-finalized").each(function() { 
    if ($(this).attr("checked")) { 
    $(this).closest("li").css("text-decoration", "line-through"); 
    } 
    }); 
    $(".subchapter-finalized").each(function() { 
    if ($(this).attr("checked")) { 
     $(this).closest("li").css("text-decoration", "line-through"); 
    } 
    }); 
}); 

感谢您的帮助。

Answer 1

修订ANSWER

更改你的Javascript这个

$(document).ready(function() { 
    $("input.content-finalized:checkbox:checked").next('span').css("text-decoration", "line-through"); 
    $("input.subchapter-finalized:checkbox:checked").parent().css("text-decoration", "line-through"); 
}); 

我不得不稍微改变你的HTML标记。我所做的只是将章节包装在一个。 这是为什么。当我将css行应用到父<li>时，它也将它应用到它的孩子，即使我将文本装饰指定为none以查看未检查的元素。所以，现在，而不是把它应用到父<li>，我把它应用到<span>代替。

Here's an updated fiddle