Hello,
I am making the form where checkbox controls view of the radiobuttons in the row with this checkbox. The problem that it works only once.
Please advise what can be wrong.
The code of the page is following:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("label input:checkbox:not(:checked)")
.parent().parent().parent()
.find(":radio")
.attr('checked',false)
.attr('disabled',true);
$("label input:checkbox:not(:checked)").click(function(){
$(this).parent().parent().parent()
.find(":radio")
.attr('disabled',false);
return true;
})
$("label input:checkbox:checked").click(function(){
$(this).parent().parent().parent()
.find(":radio")
.attr('checked',false)
.attr('disabled',true);
return true;
})
$("#clear-first").click(function(){
$("input[name='first']").attr('checked',false);
})
$("#clear-second").click(function(){
$("input[name='second']").attr('checked',false);
})
});
</script>
</head>
<body>
<form>
<table id="filters-select">
<thead>
<tr>
<td>filter name</td>
<td>first filter</td>
<td>second filter</td>
</tr>
</thead>
<tbody>
<tr>
<td><label><input type="checkbox" name="first-check" checked="checked" class="filter-checkbox">first row</label></td>
<td><label><input type="radio" name="first" value="1">value 1 col 1</label></td>
<td><label><input type="radio" name="second" value="1">value 1 col 2</label></td>
</tr><tr>
<td><label><input type="checkbox" name="second-check" class="filter-checkbox">second row</label></td>
<td><label><input type="radio" name="first" value="2">value 2 col 1</label></td>
<td><label><input type="radio" name="second" value="2">value 2 col 2</label></td>
</tr><tr>
<td><label><input type="checkbox" name="third-check" class="filter-checkbox">third row</label></td>
<td><label><input type="radio" name="first" value="3">value 3 col 1</label></td>
<td><label><input type="radio" name="second" value="3">value 3 col 2</label></td>
</tr>
<tr>
<td></td>
<td><a id="clear-first">clear</a></td>
<td><a id="clear-second">clear</a></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>