Disable Radio Button

skumar_96 · 10-21-2011, 02:42 AM

Hello Friends,
i have a small problem and need your help. I have a form with 4 radio buttons, the scenario is, when a user click on a radio button a hidden content will be displayed and the other three radio buttons will be disabled so that at one time a user can only click and view single radio button and the hidden content.
Here is my code to show hide the hidden content but i need when the user select one radio button the other radio buttons should disable.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>

<div id="tabs">
<div id="nav">
<p>Show Div 1:<input type="radio" name="tab" value="value1" class="div1" /></p>
<p>Show Div 2:<input type="radio" name="tab" value="value2" class="div2" /></p>
<p>Show Div 3:<input type="radio" name="tab" value="value3" class="div3" /></p>
<p>Show Div 4:<input type="radio" name="tab" value="value4" class="div4" /></p>
</div>

<div id="div1" class="tab">
<p>this is div 1</p>
</div>

<div id="div2" class="tab">
<p>this is div 2</p>
</div>

<div id="div3" class="tab">
<p>this is div 3</p>
</div>

<div id="div4" class="tab">
<p>this is div 4</p>
</div>
</div>

<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');

/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}

/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}

hideTabs(); /* hide tabs on load */

/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</body>
</html>

Thank you for your help in advance.

Old Pedant · 10-21-2011, 03:50 AM

You do realize that if you disable the other 3 radio buttons then there will be *NO WAY* for the user to change his/her mind and ask to see a different tab than the one first chosen? In other words, if the use accidentally picks the wrong button, his totally screwed.

I think that's very bad human interface design. Are you *SURE* you want to do that??

skumar_96 · 10-21-2011, 03:56 AM

That exactly what i want, actually i am running a promotion in which a user has to choose an option which contains a surprise so a single user can only select one surprise.

Thanks

xelawho · 10-21-2011, 03:58 AM

will it be that surprising if they look at the source code first?

just curious...

Old Pedant · 10-21-2011, 04:14 AM

Yeah, anybody with 80% of a brain will do a VIEW==>>SOURCE, look at your code, and know immediately which button to press.

And even if someone only has 50% of a brain, he/she will just hit REFRESH and choose another button if he/she doesn't like their choice.

Unless this is a page for those with 49% of a brain or less, you should do this code SERVER-side, with PHP or some such coding, so the user *can't* see the answer.

Of course, you would then need to have some kind of login system to ensure, again, that the person can't hit BACK in their browser and try another button. Even those with 25% of a brain might figure that one out.

Old Pedant · 10-21-2011, 04:16 AM

Anyway, here is the SIMPLEST answer to your question:

Code:

for(var i=0;i<nav.length;i++){
    nav[i].onclick = function(){
        hideTabs();
        showTab(this.className);
        document.getElementById("nav").style.visibility = "hidden";
   }
}

That will simply hide all the buttons, so there's no way to click on any of them again.

Unless you hit REFRESH. But, again, that requires 50% of a brain.

skumar_96 · 10-21-2011, 04:23 AM

Thank you for the solution, one more favor, can you embed the function the page i.e. the page/script i posted and make it complete.

jmrker · 10-21-2011, 03:08 PM

Quote:

Originally Posted by skumar_96

Thank you for the solution, one more favor, can you embed the function the page i.e. the page/script i posted and make it complete.

You should TRY to embed it yourself!
It is a lot easier to correct your mistakes when you make them yourself.

If you rely on others to do things, you will never learn to do it by yourself.

skumar_96 · 10-21-2011, 06:16 PM

I embedded myself, i know it was a silly question to ask. Can i have a option to disable the radio buttons instead of hiding them, what i mean i when a radio button is selected can the other other radio buttons be disabled instead of hidden?

Thank you all.

Philip M · 10-21-2011, 06:32 PM

See post #2.

skumar_96 · 10-21-2011, 07:08 PM

What is post#2

Philip M · 10-21-2011, 07:21 PM

Quote:

Originally Posted by skumar_96

What is post#2

Post # 2 in this thread by Old Pedant

If you ask for help and advice in this forum you ought to follow that advice.

skumar_96 · 10-21-2011, 07:36 PM

OK Philip, sorry about that.
Thank you Old Pendant for your help and i know what i am doing, i am going to embed this script inside a PHP page and i can't describe the entire project here and that is why i kept it short. I am perfectly aware of the advices given to me and i strictly trying to follow them and also aware of the rules and regulations of the forum.

THANK YOU ALL FOR YOUR HELP AND SPECIAL THANKS TO OLD PENDANT.

Old Pedant · 10-21-2011, 08:27 PM

Okay, if you really want to do the disable instead of hide...

Change this function:

Code:

function showTab(tab){
    document.getElementById(tab).className = 'tab'
}

to this:

Code:

function showTab(tab){
    document.getElementById(tab).className = 'tab'
    for ( var n = 0; n < nav.length; ++n )
    {
        nav[n].disabled = true;
    }
}

skumar_96 · 10-21-2011, 09:43 PM

Hello old Pendant,
it's not working, instead of disabling the radio buttons, it is hiding them