Link to home
Start Free TrialLog in
Avatar of mock5c
mock5c

asked on

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

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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

Avatar of mock5c
mock5c

ASKER

Only one checkbox can be checked.  My jquery should be working correctly for that.
Only one checkbox can be checked

replace them by radio button with the same name attribute
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
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&
@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.