Solved

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

Posted on 2014-10-15
9
517 Views
Last Modified: 2015-01-02
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

0
Comment
Question by:mock5c
9 Comments
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40381875
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40381949
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
 

Author Comment

by:mock5c
ID: 40381954
Only one checkbox can be checked.  My jquery should be working correctly for that.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 82

Expert Comment

by:leakim971
ID: 40381960
Only one checkbox can be checked

replace them by radio button with the same name attribute
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 40382007
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40382622
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
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 40384033
@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

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question