[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

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

Need simple checkbox code in HTML-if checked, display this...

Hi Folks,
I just need a simple piece of code right away. What should happen is that if a checkbox is checked, then an existing set of options become unavailable and another set of options is displayed. I have only been told this and I haven't seen any pre-existing code yet.

HTML5 and/or javascript would be great.
Thanks
Dlewis
0
dlewis61
Asked:
dlewis61
  • 3
  • 3
1 Solution
 
Julian HansenCommented:
Here is one sample but it depends on many factors. Do you want the other items disabled or hidden?
You can also group controls you want to hide / show in a div with an id and then apply disabled / hide to the div instead of the options.
This demonstrates 3 approaches.
<!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() {
   $('#cbid').click(function() {
      if ($(this).is(':checked')) {
        $('input:radio[name="options"]').show();
    $('#alternative').show();
    $('#alternative2 input').attr('disabled',false);
      }
      else {
        $('input:radio[name="options"]').hide();
    $('#alternative').hide();
    $('#alternative2 input').attr('disabled','disabled');
      }
   });
});
</script>
</head>
<body>
Sample checkbox <input type="checkbox" name="checkbox" id="cbid" /><br/>

option 1 <input type="radio" name="options" value="1" /><br/>
option 1 <input type="radio" name="options" value="2" /><br/>
<div id="alternative" style="border: 1px solid #acacac;">
option 1 <input type="radio" name="options2" value="1" />
option 1 <input type="radio" name="options2" value="2" />
</div>
<div id="alternative2" style="border: 1px solid #acacac;">
option 1 <input type="radio" name="options2" value="1" />
option 1 <input type="radio" name="options2" value="2" />
</div>
</body>
</html>

Open in new window

0
 
dlewis61Author Commented:
Hey wow this is great. I would need the other items disabled, such that the user cannot select them.
0
 
Julian HansenCommented:
Which Items?

You can expand on the above to disable / hide whatever items is needed but you should structure your code around what needs to be displayed and what needs to be hidden so the script for managing it is easier - i.e. use div's to group like controls.

Give us some more info on what you are trying to do.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
dlewis61Author Commented:
I'm checking on it now, what my team wants the code to do. Will get back asap
Thanks
0
 
dlewis61Author Commented:
Your solution did the trick! Thanks
0
 
Julian HansenCommented:
You are welcome
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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