[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 785
  • Last Modified:

Is there a way to not allow radio buttons to be clickable if one special radio button is not clicked?

In a form, using radio buttons, there are three choices. I would like it so: if first choice is not clickked, second and third choices should not be clickable.
Alternatively, first choice is shown, when clicked second choice is displayed. When also second choice is clicked, third choice is displayed.

I don't know how to achieve this. Could you please help.
0
Lennart Ericson
Asked:
Lennart Ericson
  • 6
  • 4
  • 3
  • +2
1 Solution
 
Michel PlungjanIT ExpertCommented:
Sounds very confusing using radio buttons

The radio is known to consist of a minimum of TWO choices, mutually exclusive.
Do you mean checkboxes?

Can you show the html and tell us what the choices are?

It is easy enough to enable and disable but once you click a radio it is stuck

Checkboxes would work like this

<form>
<input type="checkbox" name="chk1" onclick="this.form.chk2.disabled=!this.checked" />
<input type="checkbox" name="chk2" onclick="this.form.chk3.disabled=!this.checked" />
<input type="checkbox" name="chk3" />
</form>
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
by using id properties you can do whatever check you want

take a look ;
http://jsfiddle.net/erdincgc/RYWpe/1/

After choosing from group1 , if you click  group2's second radio button , a check is triggered.
if first group's selection is the second radio then it returns ok
else it doesn't let ok
0
 
Michel PlungjanIT ExpertCommented:
Your fiddle is not really understandable or works the way you describe - at least not in Fx 15 on OSX
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
Sorry for my poor English , maybe i couldn't express well ..

Sample fiddle contains 2 groups of radio buttons. First group has 2 radio button and second  has 3 radio button.

Her is my check scenario on the second groups second item ;

If user clicks that second groups second radio button, page checks if first group has a checked item if not warns about that and returns false.

If first group has a checked item continues and checks if the checked item is the second one . If so tells ok else warns doesn't match and returns false .

Tested again , code works as expected.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
mplungjan : As you mentioned If asker-lericson give us a sample html we may change scenario to fit her/his needs.
0
 
Michel PlungjanIT ExpertCommented:
If I click the second radio in group 1, I am told I am allowed to select the second of group 2, but that is not the case
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
Yea sure, my code sample is just for showing controlling elements status and reacting according to them.

As you explained very well "radio button" does not have a single usage. I didn't want to repeat you and wanted to show an example on controlling radio button states.

I'm sure the asker meant checkboxes and your answer is closing the case.
(Although using form elements with direct DOM references is not the advised usage but it's more easy to understand for a newbie i guess )
0
 
Lennart EricsonAmateurAuthor Commented:
This is the actual code:

    <TR>
      <TD height="29" align="left" valign="middle">&Ouml;nskar i f&ouml;rsta hand:</TD>
      <TD colspan="2">
      <div>
             <label><input type="radio" name="båtplats1" value="Brygg" />&nbsp;Bryggplats</label>
            <label><input type="radio" name="båtplats1" value="Trailer" />&nbsp;Trailerplats</label>
            <label><input type="radio" name="båtplats1" value="Strand" />&nbsp;Strandplats</label>
      </div>
      </TD>
    </TR>

<!--  This goup - name="båtplats1" - should always be visible. The second group - name="båtplats2"  - should be visible only when one radio button is clicked in the first group. Likewise, the third group - name="båtplats3"  - should be visible only when one radio button is clicked in the second group -->

    <TR>
      <TD height="29" align="left" valign="middle">&Ouml;nskar i andra hand:</TD>
      <TD colspan="2">
      <div>
             <label><input type="radio" name="båtplats2" value="Brygg" />&nbsp;Bryggplats</label>
            <label><input type="radio" name="båtplats2" value="Trailer" />&nbsp;Trailerplats</label>
            <label><input type="radio" name="båtplats2" value="Strand" />&nbsp;Strandplats</label>
      </div>
      </TD>
    </TR>
    <TR>
      <TD height="29" align="left" valign="middle">&Ouml;nskar i  tredje hand: </TD>
      <TD colspan="2">
      <div>
            <label><input type="radio" name="båtplats3" value="Brygg" />&nbsp;Bryggplats</label>
            <label><input type="radio" name="båtplats3" value="Trailer" />&nbsp;Trailerplats</label>
            <label><input type="radio" name="båtplats3" value="Strand" />&nbsp;Strandplats</label>
      </div>
      </TD>
    </TR>
0
 
Barry62Commented:
Here you go.  You can tailor this example any way you want.  I have provided samples of both options you mentioned.  1) to enable second and third radio buttons when first is clicked, as well as unhiding second and third radio buttons when previous one is clicked.


<html>
	<head>
		<title></title>
		<script type="text/javascript">
			function enableAB(){
				if(document.getElementById("rb").checked){
					alert("FDDFDD");
					document.getElementById("rb1A").disabled=false;
					document.getElementById("rb1B").disabled=false;
				}
			}
			function unhide(rb){
				if(rb=='A'){
					document.getElementById("2A").style.visibility='visible';
				}
				if(rb=='B'){
					document.getElementById("2B").style.visibility='visible';
				}
			}
		</script>
	</head>
	<body>
		<form>
			
			1:<input type="radio" name="rb" id="rb" onclick="enableAB()" />
			1-A:<input type="radio" name="rb1A" id="rb1A" disabled="true" />
			1-B:<input type="radio" name="rb1B" id="rb1B" disabled="true" />
			<br/><br/>
			2:<input type="radio" name="rb2" id="rb" onclick="unhide('A')" />
			<span id="2A" style="visibility: hidden;" >2-A:<input type="radio" name="rb2A" id="rb2A" onclick="unhide('B')" /></span>
			<span id="2B" style="visibility: hidden;" >2-B:<input type="radio" name="rb2B" id="rb2B" /></span>
		</form>
	</body>
</html>

Open in new window

0
 
Julian HansenCommented:
Here is a script that will do what you want - and will also hide the third radio button again when the first one is clicked

<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('input.chained').click(function() {
    if ($(this).next().is('.chained')) {
      $(this).next().show();
      if ($(this).next().next().is('.chained')) {
        $(this).next().next().hide();
      }
    }
  });
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" value="1" class="chained" />
<input type="radio" name="radiogroup" value="1" class="chained" style="display:none" />
<input type="radio" name="radiogroup" value="1" class="chained" style="display:none" />

</body>
</html>

Open in new window

0
 
Lennart EricsonAmateurAuthor Commented:
This is how it  should be:

First choice:       O Item A   O Item B   O Item C

If one of the radio buttons in this row is clicked, the second row should become visible:
Second choice:      O Item A   O Item B   O Item C

If one of the radio buttons in the second row is clicked, the third row should become visible:
Third choice:      O Item A   O Item B   O Item C
0
 
Julian HansenCommented:
How about this
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('input.chained').click(function() {
  if ($(this).attr('data-next')) {
    $('input.' + $(this).attr('data-next')).show();
  }
  });
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" value="1" class="chained" data-next="radiogroup2" />
<input type="radio" name="radiogroup" value="2" class="chained" data-next="radiogroup2" />
<input type="radio" name="radiogroup" value="3" class="chained" data-next="radiogroup2" />

<input type="radio" name="radiogroup2" value="4" class="chained radiogroup2" data-next="radiogroup3" style="display:none" />
<input type="radio" name="radiogroup2" value="5" class="chained radiogroup2" data-next="radiogroup3" style="display:none" />
<input type="radio" name="radiogroup2" value="6" class="chained radiogroup2" data-next="radiogroup3" style="display:none" />

<input type="radio" name="radiogroup3" value="4" class="chained radiogroup3" style="display:none" />
<input type="radio" name="radiogroup3" value="5" class="chained radiogroup3" style="display:none" />
<input type="radio" name="radiogroup3" value="6" class="chained radiogroup3" style="display:none" />
</body>
</html>
 

Open in new window

0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
As i showed in my first example more advanced control is also possible on radio buttons by setting an ID for each.

However i added your code to jsfidde as you wish to see
take a look at  http://jsfiddle.net/RYWpe/7/   again please
0
 
Lennart EricsonAmateurAuthor Commented:
Thanks.
0
 
Barry62Commented:
Hoe the hell is erdingc's solution better than mine?  I looked at the link he provided.  It doesn't work the way you described it!  Plus, I gave you solutions to both scenarios you originally posted and they work perfectly!  

You are obviously somewhat versed in javascript.  It would be stupid to think that you couldn't adapt a generic solution to your specific problem.  I mean come on!

I mean what does it take for an expert to get his answer accepted!?  Should I write the entire website for you!?
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
I also have some objections to some other topics but nothing changes. I choose the first correct answer in my questions. So I will not comment about this question.

Else, one more thing i forgot to mention in addition to the answer is ;
You should avoid using non latin letters to name elements. å is not in english alphabet and may create problems in some situations.

<input type="radio" name="båtplats2" value="Brygg" />
0
 
Julian HansenCommented:
Just saw this - and obviously would like to add my objection. My post includes completely generic code that can be extended to more radio groups if required.
0
 
Lennart EricsonAmateurAuthor Commented:
Being  a newbie I know little about this type of scripting so when I got a perfectly suitable solution which gave the answer to my question, I picked it. As simple as that. The other answers might be generic and possible to adjust to my need, but I don't know how to do it and so when I was presented with the correct answer I was happy.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 6
  • 4
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now