Disable a select box if another select is used

I have a form where the user can select the size and colour of a t-shirt.
There are four different select boxes:
1. Men's sizes:<select name="item_options[m_size]">
2. men's colours: <select name="item_options[m_colour]"
3. Women's sizes: <select name="item_options[f_size]"
4. Women's colours: <select name="item_options[f_colour]"

The customer can only either add men's or women's t-shirts to the order so I would like to have the select options working that if a man's size t-shirt is chosen the women's sizes are disabled or revert back to a blank value and vice versa.

Thanks
PlanAndSimpleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Gurvinder Pal SinghCommented:
then if the user wants to change his mind and buy another gender's cloth, then how will you allow to change it back?

Shouldn't there be a radio button which will segregate and toggle between select boxes for male and female?
Frosty555Commented:
I'm not sure exactly what you want the behavior to be, but you can use javascript to disable or enable the select boxes, once you've assigned IDs to each select box.

document.getElementById("idofselectbox").disabled = true;
document.getElementById("idofselectbox").disabled = false;

You can hook into the onchange() event of the select boxes and change the enabled/disabled state of the others depending on what value has been picked, or have a couple radio buttons which enable/disable the appropriate set of select boxes.
Gurvinder Pal SinghCommented:
i was talking about something like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script>
		function toggleSelects( thisObj )
		{
			if ( thisObj.id=="male")
			{
				document.getElementById("msize").removeAttribute("disabled");
				document.getElementById("mcolor").removeAttribute("disabled");
				document.getElementById("fsize").setAttribute("disabled","true");
				document.getElementById("fcolor").setAttribute("disabled","true");
			}
			else if ( thisObj.id=="female")
			{
				document.getElementById("fsize").removeAttribute("disabled");
				document.getElementById("fcolor").removeAttribute("disabled");
				document.getElementById("msize").setAttribute("disabled","disabled");
				document.getElementById("mcolor").setAttribute("disabled","disabled");
			}
		}
	</script>
</HEAD>

<BODY>
	<form>
		<input type="radio" id="male" name="gender" onclick="toggleSelects(this)">
		For Male
		<select name="msize" id="msize" disabled>
			<option value="1">size1</option>
			<option value="2">size2</option>
			<option value="3">size3</option>
			<option value="4">size4</option>
		</select>
		<select name="mcolor" id="mcolor" disabled>
			<option value="1">color1</option>
			<option value="2">color2</option>
			<option value="3">color3</option>
			<option value="4">color4</option>
		</select>
		<br>
		<input type="radio" id="female" name="gender" onclick="toggleSelects(this)">	
		For FeMale
		<select name="fsize" id="fsize" disabled>
			<option value="1">size1</option>
			<option value="2">size2</option>
			<option value="3">size3</option>
			<option value="4">size4</option>
		</select>
		<select name="fcolor" id="fcolor" disabled>
			<option value="1">color1</option>
			<option value="2">color2</option>
			<option value="3">color3</option>
			<option value="4">color4</option>
		</select>
	</form>
</BODY>
</HTML>

Open in new window

OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

PlanAndSimpleAuthor Commented:
To explain further - I would like to make it impossible for someone to select sizes from both the male and female select dropdowns.

If it was possible I would like the male size select box to default back to the '<option value="">select size</option>' if a female size was selected and the reverse if a male size is selected.
Gurvinder Pal SinghCommented:
how would that happen?
Do you want that if i select male size, any selections on female sizes should be reset, and vice versa?
PlanAndSimpleAuthor Commented:
yes that's it exactly!
Gurvinder Pal SinghCommented:
check this then
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script>
		function resetOther( id )
		{
			if ( id.charAt(0)=='m')
			{
				document.getElementById("fsize").value = "0";
				document.getElementById("fcolor").value = "0";
			}
			if ( id.charAt(0)=='f')
			{
				document.getElementById("msize").value = "0";
				document.getElementById("mcolor").value = "0";
			}
		}
	</script>
</HEAD>

<BODY>
	<form>
		<select name="msize" id="msize" onchange="resetOther(this.id)">
			<option value="0"></option>
			<option value="1">size1</option>
			<option value="2">size2</option>
			<option value="3">size3</option>
			<option value="4">size4</option>
		</select>
		<select name="mcolor" id="mcolor"  onchange="resetOther(this.id)">
			<option value="0"></option>
			<option value="1">color1</option>
			<option value="2">color2</option>
			<option value="3">color3</option>
			<option value="4">color4</option>
		</select>
		<br>
		<select name="fsize" id="fsize"  onchange="resetOther(this.id)">
			<option value="0"></option>
			<option value="1">size1</option>
			<option value="2">size2</option>
			<option value="3">size3</option>
			<option value="4">size4</option>
		</select>
		<select name="fcolor" id="fcolor"  onchange="resetOther(this.id)">
			<option value="0"></option>
			<option value="1">color1</option>
			<option value="2">color2</option>
			<option value="3">color3</option>
			<option value="4">color4</option>
		</select>
	</form>
</BODY>
</HTML>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PlanAndSimpleAuthor Commented:
works perfectly. Thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Software

From novice to tech pro — start learning today.