Disabling image radio buttons

I’m looking to disable a group of radio buttons which are really images once when of them has been clicked, also a second set of radio buttons (images) are then made visible and enabled below. Here is what I have:

<style type="text/css">
#sub1, #sub2 {
position: relative;
width: 180px;
padding: 10px;
color: Black;
display: none;
<script type="text/javascript">
var chkboxTicked = new Image();
chkboxTicked.src = "../images/star_full.jpg";
var chkboxEmpty = new Image();
chkboxEmpty.src = "../images/star.jpg";

// Needs solution for getElementsByName in IE
function submitcheckboxes(){
	var checkboxes = document.getElementsByName("imagecheckboxes");
	for(var i in checkboxes){
		var location = document.getElementById("form1");
		var input = document.createElement('input');
		if(checkboxes[i].src == chkboxTicked.src){
		} else {
	return true;

function setKeep( elem, groupName )
	var group	= elem.form.elements[groupName],
		bool	= elem.checked,
		i	= 0,
	while( rb = group[i++] )
		rb.disabled = bool;

function toggleChkBox(that){
	if(that.src == chkboxEmpty.src){
		that.src = chkboxTicked.src;
	} else {
		that.src = chkboxEmpty.src;
//	setKeep(this, 'radio');

function validate(form) {
// Checking if at least one period button is selected. Or not.
	if (document.form1.radio[0].checked ){
		setVisibility('sub1', 'none');
	} else {
		setVisibility('sub2', 'none');


// need to change for IE
function setVisibility(id, visibility) {
	document.getElementById(id).style.display = visibility; 

<form name='form1' method=post action=action_page.php onsubmit='return validate(this)'><b>Here is the question </b><br>
<img name="imagecheckboxes" src="../images/star.jpg" name=radio onClick="toggleChkBox(this);" />Answer 1:1
<input type=radio name=radio value='2' onClick="setKeep(this, 'radio');";>Answer 1:2
<input type=radio name=radio value='3' onClick="validate(this)";>Answer 1:3
<input type=radio name=radio value='4' onClick="validate(this)";>Answer 1:4
<input type=reset value=Reset>
<br />
<div id="sub1">
<input type=radio name="radio1" value='5' onClick="validate(this)";>Answer 1a:1
<input type=radio name="radio1" value='6' onClick="validate(this)";>Answer 1a:2
<input type=radio name="radio1" value='7' onClick="validate(this)";>Answer 1a:3
<input type=radio name="radio1" value='8' onClick="validate(this)";>Answer 1a:4
<div id="sub2">
<input type=radio name="radio2" value='9' onClick="validate(this)";>Answer 1b:1
<input type=radio name="radio2" value='10' onClick="validate(this)";>Answer 1b:2
<input type=radio name="radio2" value='11' onClick="validate(this)";>Answer 1b:3
<input type=radio name="radio2" value='12' onClick="validate(this)";>Answer 1b:4

of all the information I can find; this thread has been of particular help:http://www.sitepoint.com/forums/showthread.php?t=123347&highlight=disable+radio+button but also [URL=“http://forums.whirlpool.net.au/forum-replies-archive.cfm/1272828.html”]http://forums.whirlpool.net.au/forum-replies-archive.cfm/1272828.html is of great interest because it identifies the problem with Internet Explorer (all versions) in that it cannot process ‘getElementById’ or ‘getElementByName’…

>> anyone who can help or offer any suggestions regarding these points please step forward <<

_with thanks

Internet Explorer pollutes the id namespace with name attributes along with the id attributes that should be there. As long as you don’t give one field the same name as you used as an id on a different field then this will not cause a problem.

IE has supported getElementById since IE5 was released (apart from when you use names that are the same as the id on different fields).

>> thanks for the response and sorry for the delay…

… don’t think it can be disabled with css - I’m just going to make it so it can only be checked once…

Have you tried this in IE because I have numerous times with good results in all other browsers except Internet Explorer (testing in IE7) - has anyone else had problems?


well there are 2 problems really >>

  1. the code I posted doesn’t allow me to disable any image radio buttons when I click on any of them though it works with normal radio buttons > need some guidance here.

  2. if you didn’t know getElementById and getElementByName will not work in Internet Explorer so it’s not really a serious option <

>> if anyone can help with any of these points or has any suggestions please post in the interests of progress <

_with thanks

  1. the code I posted doesn’t allow me to disable any image radio buttons… - If you are using images as radio buttons then it’s probably best to add a css class to the anchor/image and depending on if this class exists then toggle for disabled/enabled.

  2. getElementById…will not work in Internet Explorer…
    - document.getElementById has always worked in IE (well at least in the not-so-prehistoric versions), not sure what you mean by it not working?

Why are you using getElementsByName? It would be more suitable to use getElementById and give the image an id.

If this isn’t the problem you are having please elaborate a bit more clearly.

Good luck