checkbox can't be checked when hide() show() has....[SOLVED]
I'm trying to make a collapsible menu with form tagis inside of it.
This is the html markup without any javascript/jquery, consisting of a nested <li> inside a <ul>
-
<html>
<head>
<title>test</title>
</head>
<body>
<form>
<ul>
<li>test list
<ul>
<li>test list
<table>
<tr>
<td><input type="checkbox">test checkbox</td>
</tr>
</table>
</li>
</ul>
</li>
</ul>
</form>
</body>
</html>
The checkbox works fine, but when I add the jquery code from "jquery in action" chapter 5 take 3, to make it collasible. The checkboxes stops to work. They can't be checked.
It's using two gif images to represent + and - on the list-style-image.
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
$(function(){
$('li:has(ul)')
.click(function(event){
if (this == event.target) {
$(this).css('list-style-image',
(!$(this).children().is(':hidden')) ?
'url(plus.gif)' : 'url(minus.gif)');
$(this).children().toggle('slow');
}
return false;
})
.css({cursor:'pointer',
'list-style-image':'url(plus.gif)'})
.children().hide();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image':'none'
});
});
</script>
Does anyone have an answer to why the checkbox stops working?