jQuery to make dynamically created radiobutton groups mutually exclusive

Question

I have some C# (asp.net mvc 3) code that is generating radio buttons on the page and assigning them to groups dynamically. I have some jQuery that will make "all" radio buttons on the page mutually exclusive but that isn't exactly what the requirement is supposed to do.

Each group needs to be mutually exclusive and the code I am using now makes every radio button the page mutually exclusive and that will not work.

How can I make each group mutually exclusive? This has to be dynamic as the group name is dynamically generated at run time.

Rendered Html:








    






    Approvals Edit


        

        

    
    
    
    
    
    


        

        

        

        

        

        

        

        

        

        

        

        

        

        


        

        


    




    
        Development
       

        


    





    Your session has expired
    



    Your session will expire in  seconds
    
    

    
        
            
                
                    CAMMS
                
            

                

            

                
                    Wednesday, January 30, 2013

                

                Baker, Nathan |

                
Computer Services,  Central


                
            
        


        
            Category: Certifications
        
        
            
                Category: Certifications
            





        
                     Enrollment

        
        
                     Approvals

        
        
                     Maintenance

        
        
                     Scheduling

        



    Process:   



           
        


    
    

        

        
            



    
    
 


    Sub-Process:   



               

            
                
                    
                    Approvals Edit


                    
                

                


    

        
                

                        Attendee
                        
                        Attendee   
                                                






                
                

                        Certification
                        
                        Certification   
                                                






                
                

                        Score
                        
                        Score   
                                                






                
                

                        Proficiency
                        
                        Proficiency   
                                                






                
                

                        Approve
                        
                        Approve   
                                                

                    
                
                

                        Reject
                        
                        Reject   
                                                

                    
                
       
           
        
                

                        Attendee
                        
                        Attendee   
                                                






                
                

                        Certification
                        
                        Certification   
                                                






                
                

                        Score
                        
                        Score   
                                                






                
                

                        Proficiency
                        
                        Proficiency   
                                                






                
                

                        Approve
                        
                        Approve   
                                                

                    
                
                

                        Reject
                        
                        Reject   
                                                

                    
                
       

    
    
        *Indicates a required field
    
    
        
                
                
        
    





                
            
        
        
            
                
                    
                        
                                

                                    Construction Manual

                        
                        
                                

                                    Spec Book

                        
                        
                                

                                    Testing Manual

                        
                        
                                




                            Search


                        
                        
                                

                                    Help

                        
                        
                                

                                    Help Desk

This is the Edit ViewModel:

    using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.UI.WebControls;
using Camms.ValueObjects;
using CammsWeb.Code;
using CammsWeb.Code.Attributes;
using CammsWeb.Attributes;
using CammsWeb.Code.TemplateElements;

namespace CammsWeb.Models.Categories.Certifications.Approvals
{
    public class ApprovalEditViewModel : ViewModelBase
    {
        public long PersonCertificationId { get; set; }

        public long RefWtfMembersId { get; set; }

        public long WorkerId { get; set; }

        public long WtfApprovalId { get; set; }

        public string MembersId { get; set; }

        // this will be Y or N for approve/reject
        public string Vote { get; set; }

        [Layout(3), DisplayName("Attendee"), Disable()]
        public string PersonName { get; set; }

        [Layout(4), DisplayName("Certification"), Disable()]
        public string Certification { get; set; }

        [Layout(1), DisplayName("Score"), Disable()]
        public double Score { get; set; }

        [Layout(2), DisplayName("Proficiency"), Disable()]
        public string ExamProficiency { get; set; }

        [Layout(1), DisplayName("Approve"), RadioButton(FalseValue = "N", TrueValue = "Y")]
        public string Approve { get; set; }

        [Layout(1), DisplayName("Reject"), RadioButton(FalseValue = "Y", TrueValue = "N")]
        public string Reject { get; set; }

    }
}

Eli Gassert · Accepted Answer

Given the groupname attribute, you can do this:

$(':radio[groupname]').change(function()
{
  var groupname = $(this).attr('groupname');
  var filter = ':radio[groupname="' + groupname + '"]';


  $(filter).attr('checked', false); // find all elements with the same groupname, uncheck them

  $(this).attr('checked', true); // reset to checked since we probably just unchecked it with the line above!
});

http://jsfiddle.net/7nAsJ/

Now, for this to work, names MUST be unique. In the JSFiddle above, you'll see I renamed Approve and Reject to Approve2 and Reject2 in the sample HTML code. So if you have two radio buttons with the name Approve then they're auto-grouped by HTML DOM standards and they will be automatically mutually exclusive. If you can't have that, then there are two other options:

On load,change the name and IDs to append the group name. Then use the JS above. But if you're going to change the names anyway, then I suggest option #2...
Change the name to the groupname, and then no JS will be required anyway! It's automatic.

To demonstrate, here's the code to fix the names: http://jsfiddle.net/7nAsJ/1/

$(':radio[groupname]').each(function()
{
  var groupname = $(this).attr('groupname');
  $(this).attr('name', groupname);
  $(this).attr('id', $(this).attr('id') + '_' + groupname); // set new ID to old ID_groupname for uniqueness
});

jQuery to make dynamically created radiobutton groups mutually exclusive

Answers (2)

Related Questions