Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to "grey" a radio button so it can't be selected?

Status
Not open for further replies.
gns100

gns100

Programmer
Aug 11, 2003
40
US
First, I'm using a drop down list in a form to select an item. Next I need to select a radio button from say 3 choices. Depending on the selection from the list, not all of the radio button choices will be valid. Can I "grey out" the inappropriate choices so they can't be selected. How do I do this?

Thanks,
 
Sort by date Sort by votes
Radio buttons are grouped by their name. If name="" then they aren't in a group and cannot be selected.


<input type=&quot;radio&quot; name=&quot;group&quot; id=&quot;one&quot;>


<script>
document.getElementById('one').name=&quot;&quot;;
</script>

Hope it works, lol! :D

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
document.getElementById('one').disabled=&quot;true&quot;;

that also works :p

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Stormbind -- I used your suggestion, probably incorrectly.

Here's a simple example of what I'm trying to achieve. I want the &quot;week&quot; radio button option to be unavailable if I select &quot;Hawaii&quot;.

Code: 
<html>
<head>
<title>Test Page</title>
</head>
<body>

<form method=&quot;POST&quot; action=&quot;--WEBBOT-SELF--&quot;>
  <select size=&quot;1&quot; name=&quot;vacation&quot;>
  <option value=&quot;haw&quot;>Hawaii</option>
  <option value=&quot;mex&quot;>Mexico</option>
  <option value=&quot;sd&quot;>San_Diego</option>
  </select></p>
  
  <fieldset style=&quot;padding: 2&quot;>
  
  <input type=&quot;radio&quot; name=&quot;tperiod&quot; value=&quot;V4&quot; id=&quot;one&quot;>Month  
  <input type=&quot;radio&quot; name=&quot;tperiod&quot; value=&quot;V5&quot; id=&quot;two&quot; checked>Week  
  <input type=&quot;radio&quot; name=&quot;tperiod&quot; value=&quot;V6&quot; id=&quot;three&quot;>Day</fieldset></p>
 
  <script>
  if(vacation.value == &quot;haw&quot;){
  
  document.getElementById('three').name=&quot;&quot;;
  }
   
  </script>
 
  <p> </p>
  <p><input type=&quot;submit&quot; value=&quot;Submit&quot; name=&quot;B1&quot;><input type=&quot;reset&quot; value=&quot;Reset&quot; name=&quot;B2&quot;></p>
</form>
</body>
</html>
 
Upvote 0 Downvote
There's a few things I saw wrong with your code so I'll just paste some initial changes. This should get you started:
Code: 
<html>
<head>
<title>Test Page</title>
<script language=Javascript>
function radioCheck() {
   var obj = blahForm.vacation;
   if(obj.options(obj.selectedIndex).value == &quot;haw&quot;){
      blahForm.tperiod[2].disabled = &quot;true&quot;;
   }
   else {
      blahForm.tperiod[2].disabled = &quot;false&quot;;
   }   
}
</script>
</head>
<body>

<form name=blahForm method=&quot;POST&quot; action=&quot;--WEBBOT-SELF--&quot;>
  <select size=&quot;1&quot; name=&quot;vacation&quot; onchange='radioCheck()'>
  <option value=&quot;haw&quot;>Hawaii</option>
  <option value=&quot;mex&quot;>Mexico</option>
  <option value=&quot;sd&quot;>San_Diego</option>
  </select></p>
  
  <fieldset style=&quot;padding: 2&quot;>
  
  <input type=&quot;radio&quot; name=&quot;tperiod&quot; value=&quot;V4&quot;>Month  
  <input type=&quot;radio&quot; name=&quot;tperiod&quot; value=&quot;V5&quot; checked>Week  
  <input type=&quot;radio&quot; name=&quot;tperiod&quot; value=&quot;V6&quot;>Day</fieldset></p>

  <p> </p>
  <p><input type=&quot;submit&quot; value=&quot;Submit&quot; name=&quot;B1&quot;><input type=&quot;reset&quot; value=&quot;Reset&quot; name=&quot;B2&quot;></p>
</form>
</body>
</html>

-kaht

banghead.gif
 
Upvote 0 Downvote
Thanks Kaht. I used your suggestions but the &quot;disabled&quot; feature didn't work as I expected. Both &quot;disabled&quot; true or false greyed out the button.

I want to clear the disabled values when another item (say &quot;mex&quot;) which doesn't have the same restrictions is selected. I thought I could use disabled = &quot;false&quot; but that didn't work as expected. I also tried enable but couldn't get the button to &quot;ungrey&quot;.

Any further suggestions would be appreciated. Thanks.


Code: 
&lt;html&gt;

&lt;head&gt;
&lt;title&gt;Test Page&lt;/title&gt;

&lt;script language=Javascript&gt;

function radioCheck(){
var obj = blahForm.vacation;
	for(i=0; i&lt;3; i++){
	blahForm.tperiod[i].enabled = &quot;true&quot;;
	//alert(&quot;Test1&quot;);
	}
	//blahForm.tperiod[2].enabled = &quot;true&quot;;
	//alert(&quot;Test2&quot;);
	if(obj.options(obj.selectedIndex).value == &quot;haw&quot;){
		blahForm.tperiod[2].disabled = &quot;true&quot;;
	}
	else{
		//blahForm.tperiod[2].disabled = &quot;false&quot;;
	}
	}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name=blahForm method=&quot;POST&quot; action=&quot;--WEBBOT-SELF--&quot;&gt;
  &lt;select size=&quot;1&quot; name=&quot;vacation&quot; onChange='radioCheck()'&gt;
  &lt;option value=&quot;entry&quot;&gt;Vacation List&lt;/option&gt;
  &lt;option value=&quot;&quot;&gt;---------&lt;/option&gt;
  &lt;option value=&quot;haw&quot;&gt;Hawaii&lt;/option&gt;
  &lt;option value=&quot;mex&quot;&gt;Mexico&lt;/option&gt;
  &lt;option value=&quot;sd&quot;&gt;San_Diego&lt;/option&gt;
  &lt;/select&gt;&lt;/p&gt;
  
  &lt;fieldset style=&quot;padding: 2&quot;&gt;
  
  &lt;input type=&quot;radio&quot; name=&quot;tperiod&quot; value=&quot;V4&quot; &gt;Month&amp;nbsp;&amp;nbsp;
  &lt;input type=&quot;radio&quot; name=&quot;tperiod&quot; value=&quot;V5&quot; checked&gt;Week&amp;nbsp;&amp;nbsp;
  &lt;input type=&quot;radio&quot; name=&quot;tperiod&quot; value=&quot;V6&quot; &gt;Day&lt;/fieldset&gt;&lt;/p&gt;
 
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p&gt;&lt;input type=&quot;submit&quot; value=&quot;Submit&quot; name=&quot;B1&quot;&gt;&lt;input type=&quot;reset&quot; value=&quot;Reset&quot; name=&quot;B2&quot;&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
 
Upvote 0 Downvote
It's not working because disabled=&quot;true&quot; is a string and you want disabled=true which is a boolean value.

Hope this helps,

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Sadly, I made the same error :(

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
whoa gns100 howd you get that little textbox with all your code in it !?
 
Upvote 0 Downvote
New TGML effect for /code - wonder if they fixed the 'i' glitch..

Code: 
if (array[i]) alert('yay');

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
629
Kennelbloke
Kennelbloke
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
483
Rayj0000
Rayj0000
berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
507
berkshirea
berkshirea
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
180
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top