Sometimes we need to implement the functionality of radio buttons using check boxes. It is very rare, but then...... This is just a very simple example..
<HTML>
<HEAD>
<script language='Javascript'>
function disableCheckbox(form)
{
var count = 0;
var loc = "";
var table = document.getElementById('table1');
var rows = table.getElementsByTagName("tr");
if(form.chks.length)
{
for (var j=0;j<form.chks.length;j++)
{
if (form.chks[j].checked)
{
count = 1;
loc = j;
break;
}
}
if(count == 1)
{
for(var j=0;j<form.chks.length;j++)
{
if(j != loc)
{
form.chks[j].disabled='true';
}
else
{
rows[j].className="shaded";
}
}
}
if(count == 0)
{
for(var j=0;j<form.chks.length;j++)
{
form.chks[j].checked=false;
form.chks[j].disabled=false;
rows[j].className="notshaded";
}
}
}
else
{
if(form.chks.checked)
rows[0].className="shaded";
else
rows[0].className="notshaded";
}
}
</script>
<style>
.notshaded {background-color: "#ffffff";}
.shaded{background-color: "#E8E8E8";}
</style>
</HEAD>
<BODY>
<form>
<table id='table1' border="1">
<tr>
<td>
<input type="checkbox" name="chks" value="first" onclick="disableCheckbox(this.form);" disabled='true'/>
</td>
<td>First</td>
</tr>
<tr class="shaded">
<td>
<input type="checkbox" name="chks" value="second" onclick="disableCheckbox(this.form);" checked="true"/>
</td>
<td>Second</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chks" value="third" onclick="disableCheckbox(this.form);" disabled='true'/>
</td>
<td>Third</td>
</tr>
</table>
</form>
</BODY>
</HTML>
