#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    146
    Rep Power
    2

    Question Validate a checkbox and a radio button not selected for same item?


    Hi all,

    I've got a page that loads photos from a db.

    There is 1 "primary" photo, and there are any number of "secondary" photos that may or may not be present up to a total of 10 photos (including the primary).

    The primary photo is displayed along with the option to delete (checkbox).

    If a secondary photo is found, it is displayed along with the options to delete (checkbox) or make it a new primary photo (radio button).

    What I'm looking for, is Javascript (I will handle server checks later) that will prevent a user from selecting a single secondary photo's "delete" checkbox as well as it's "make primary" radio button. In other words, they shouldn't be marking it for deletion AND trying to make it the primary photo at the same time.

    Ex: secondary photo #1 can not be checked for deletion as well as checked to make it the primary.

    It's ok, however, if secondary photo #1 is checked for delete, but secondary photo #2 is selected to make primary.

    I already have code thats working, to see if they user wants to make one of the secondary photos the primary, but has not checked the delete checkbox for the current primary photo.

    How would I code the javascript to not allow both "make primary" radio button and "delete" checkbox are not checked for the same photo?

    I applogize if this is too abstract without specific code, but if anyone could come up with some pseudo code at least, and what javascript functions I should use, I would appreciate it!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    I would do something like this:
    Code:
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    function doubleCheck(box1,box2)
    {
     if ($('#'+box1+'').is(':checked')) {
      $('#'+box2+'').attr('checked', false);
     }
    }
    </script>
    
    Primary
    <input id="prime1" type="checkbox" onclick="doubleCheck(this.id,'del1')"/>
    Delete
    <input id="del1" type="checkbox" onclick="doubleCheck(this.id,'prime1')"/>
    and... you may want to display a message to end user, as well.

IMN logo majestic logo threadwatch logo seochat tools logo