Solved

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

Posted on 2014-10-15
9
603 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 58

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
The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

 
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 58

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 58

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

615 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