Unselect or prevent selection of radio buttons based on current checked checkbox

For specific reasons, I have to have two separate divs for the two groups of checkbox (groups "I" and "II").  To pull them together, I've wrapped a "category" div class around the whole thing.  I apologize for the formatting of the html.

The idea is that I should only be able to check one checkbox in the whole structure.  If I didn't have two separate groups, that would not be an issue.  However, with my setup, I had to write some jquery to solve this problem.  I've attached the html and the jquery below.

I have the checkboxes working correctly.  However, this is an issue.  I can select the radio button B.1 even if checkbox A is selected.  This should not be allowed.  Likewise, I can select radio B.1. even if checkbox D is selected.  In other words, if a checkbox is selected, then all non-child radios (B.1, B.2, C.1, etc) should be cleared out.  As a bonus, it would be nice to actually hide those radio button groups if a a different checkbox is selected.  I should only be able to select radios if it's parent checkbox is selected.

Please check out my jquery and let me know how I can accomplish this.  I've tried many different approaches to no avail.

HTML:
<div class="category">
   <div>
      <div>
         <span><strong>I.</strong></span>
      </div>
   </div>
   <div>
      <div>&nbsp;</div>
      <div>
         <div id="skillsbox" maxselected="1">
            <div>
               <label for="skillsliteracy"><input class="" name="skills" id="skillsliteracy" value="literacy" type="checkbox"> A.</label>
            </div>
            <div>
               <label for="skillslogical"><input class="" name="skills" id="skillslogical" value="logical" type="checkbox"> B.</label>
               <span style="display: inline;" id="skillslogicaltogglebox">
                  <div id="skills_logicalbox">
                     <div>
                        <label for="skills_logicalskmath"><input class="" name="skills_logical" id="skills_logicalskmath" value="skmath" type="radio">B.1.</label>
                     </div>
                     <div>
                        <label for="skills_logicalskoth"><input class="" name="skills_logical" id="skills_logicalskoth" value="skoth" type="radio"> B.2.</label>
                     </div>
                  </div>
               </span>
            </div>
         </div>
      </div>
   </div>
   <div>
      <div>
         <span><strong>II.</strong></span>
      </div>
   </div>
   <div>
      <div>&nbsp;</div>
      <div>
         <div id="libstudbox" maxselected="1">
            <div>
               <label for="libstudliberal"><input name="libstud" id="libstudliberal" value="liberal" type="checkbox"> C.</label>

               <span style="display: inline;" id="libstudliberaltogglebox">
                  <div id="libstud_liberalbox">
                     <div>
                        <label for="libstud_liberallsmin"><input class="" name="libstud_liberal" id="libstud_liberallsmin" value="lsmin" type="radio"> C.1.</label>
                     </div>
                     <div>
                        <label for="libstud_liberallswom"><input class="" name="libstud_liberal" id="libstud_liberallswom" value="lswom" type="radio"> C.2.</label
                     </div>
                  </div>
               </span>
            </div>
            <div>
               <label for="libstudintl"><input name="libstud" id="libstudintl" value="intl" type="checkbox"> D.</label>
               <span style="display: inline;" id="libstudintltogglebox">
                  <div id="libstud_intlbox">
                     <div>
                       <label for="libstud_intllshist"><input class="" name="libstud_intl" id="libstud_intllshist" value="lshist" type="radio"> D.1.</label>
                     </div>
                     <div>
                        <label for="libstud_intllsglob"><input class="" name="libstud_intl" id="libstud_intllsglob" value="lsglob" type="radio"> D.2.</label>
                     </div>
                  </div>
               </span>
            </div>
            <div>
               <label for="libstudscience"><input name="libstud" id="libstudscience" value="science" type="checkbox"> E.</label>
               <span style="display: inline;" id="libstudsciencetogglebox">
                  <div id="libstud_sciencebox">
                     <div>
                        <label for="libstud_sciencelsnatsci"><input name="libstud_science" id="libstud_sciencelsnatsci" value="lsnatsci" type="radio"> E.1.</label>
                     </div>
                     <div>
                        <label for="libstud_sciencelstech"><input name="libstud_science" id="libstud_sciencelstech" value="lstech" type="radio"> E.2.</label>
                     </div>
                  </div>
               </span>
            </div>
         </div>
      </div>
   </div>
</div>

Open in new window


jQuery:
$(function () {
    $(".category").find("input:checkbox").click(function () {
        var curr = $(this).is(":checked");
        $(".category input:checked").removeAttr("checked");
        if (curr) {
            $(this).attr("checked", true);
        }
    });
});

Open in new window

mock5cAsked:
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.

Julian HansenCommented:
A couple of things - firstly your code won't work because of this line
    $(".category").find("input:checkbox").click(function () {
        var curr = $(this).is(":checked");
        $(".category input:checked").removeAttr("checked"); // <==== WILL DESELECT CB AS YOU CLICK IT
        if (curr) {
            $(this).attr("checked", true);
        }
    });

Open in new window

What is not clear from your post is the exact behaviour. This is what we know.
Radio's can only be activated if parent Checkbox is clicked

What is not clear is if you can select more than one Checkbox.

Finally, your markup - you might want to consider adding a class to each of the radio button containers so you can address all containers simultaneously - if you want to hide those that don't have their parent checked.

Please confirm code issue and what the exact behaviour is you required.
0

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
leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/tgwcx82k/
$(function () {
    $(":checkbox", ".category").change(function () {
        var myContainer = $(this).closest("div");
        if($(this).is(":checked")) {
            $(":radio,:checkbox",".category").filter(function() {
                return myContainer.parent().find(this).length == 0 && myContainer.find(this).length == 0;
            }).attr({disabled:true,checked:false});
        }
        else {
            $(":radio,:checkbox",".category").attr({disabled:false});
        }
    });
});

Open in new window

0
mock5cAuthor Commented:
Only one checkbox can be checked.  My jquery should be working correctly for that.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

leakim971PluritechnicianCommented:
Only one checkbox can be checked

replace them by radio button with the same name attribute
0
Julian HansenCommented:
Only one checkbox can be checked.  My jquery should be working correctly for that.
Not sure how - the following line says uncheck all checked checkboxes?
$(".category input:checked").removeAttr("checked");

Open in new window


So when a checkbox is clicked
a) All other checkboxes are unchecked
b) All radio buttons are cleared
c) All radio buttons not children of the checked box are hidden
d) Child radio's of the checked box are shown

Is that correct
0
COBOLdinosaurCommented:
Why would you use scripting to try and make a checkbox behave like a radio?  I think you need to re-think what you are doing and revert to a rational approach where you start with an appropriate selection of elements and attribute based on the built in native functionality.

Cd&
0
Julian HansenCommented:
@Cd& - there are valid reasons for this.

If you want a one or none solution - i.e. choose one of many but have the option to turn that option off - select none. With radio buttons you can't do that without scripting - and in this context checkboxes would make more sense.
0
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
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.