Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-10-15
9
Medium Priority
?
657 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 2000 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
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.

 
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

730 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