2

I have converted two picklists into radio buttons. I want to select only one radio button from two radio button groups. I also write jquery for this two group but it's not working. please help me out.

//----------apex code--------------

public List<SelectOption> getTemplate(){
  List<SelectOption> options = new List<SelectOption>();
  Schema.sObjectType sObject_Type = Proposal_Version__c.getSObjectType();
  Schema.DescribeSObjectResult sObject_Result = sObject_Type.getDescribe();
  Map<String,Schema.SObjectField> fieldMap = sObject_Result.fields.getMap();
  List<Schema.PicklistEntry> picklist_values = fieldMap.get('Template__c').getDescribe().getPickListValues();
  for (Schema.PicklistEntry a : picklist_values) {
  options.add(new selectOption(a.getLabel(),a.getValue()));
  }
  return options;

  }
  public List<SelectOption> getTemplateBundeles(){
  List<SelectOption> options = new List<SelectOption>();
  Schema.sObjectType sObject_Type = Proposal_Version__c.getSObjectType();
  Schema.DescribeSObjectResult sObject_Result = sObject_Type.getDescribe();
  Map<String,Schema.SObjectField> fieldMap = sObject_Result.fields.getMap();
  List<Schema.PicklistEntry> picklist_values = fieldMap.get('Template_Bundles__c').getDescribe().getPickListValues();
  for (Schema.PicklistEntry a : picklist_values) {
  options.add(new selectOption(a.getLabel(),a.getValue()));
  }
  return options;

  }

//----- Vf code--------

<apex:pageBlockSection title="Template Hosting Fees" columns="1" > 
  <apex:pageBlockSectionItem > 
  <apex:outputLabel >Template</apex:outputLabel>
  <apex:selectRadio styleClass="TemplateGroup" id="IdRedioBtnTemplateHostingFee" value="{!ProposalVersion.Template__c}" onchange="test(this);">
  <apex:selectOptions value="{!Template}"></apex:selectOptions>
  </apex:selectRadio>
  </apex:pageBlockSectionItem>
  <apex:pageBlockSectionItem >
  <apex:outputLabel >OR</apex:outputLabel>
  <apex:outputLabel ></apex:outputLabel>
  </apex:pageBlockSectionItem>
  <apex:pageBlockSectionItem > 
  <apex:outputLabel >Multiple Tamplates</apex:outputLabel>
  <apex:selectRadio styleClass="TemplateGroup" id="IdRedioBtnHostingBundles" value="{!ProposalVersion.Template_Bundles__c}" onchange="test(this);">
  <apex:selectOptions value="{!TemplateBundeles}"></apex:selectOptions>
  </apex:selectRadio>
  </apex:pageBlockSectionItem>  
  </apex:pageBlockSection>
//------- Jquery-----
function test(sender){            
   $('.TemplateGroup').find('input:radio').each(function(){
         $(this).prop('checked', false);
   });
   $(sender).prop('checked', true);
}

enter image description here

  • Share the html after rendering from browser; – itzmukeshy7 Mar 27 '17 at 11:12
2

With jQuery you can easily do this. Just deselect all radio buttons in the first set on the change event of other Radio set and vice versa.

<apex:page >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <apex:form >
        <apex:selectRadio id="IdRedioBtnTemplateHostingFee">
            <apex:selectOption itemLabel="radio1" itemValue="radio1"/>
            <apex:selectOption itemLabel="radio2" itemValue="radio2"/>
            <apex:selectOption itemLabel="radio3" itemValue="radio3"/>
        </apex:selectRadio>
        <apex:selectRadio id="IdRedioBtnHostingBundles">
            <apex:selectOption itemLabel="radio4" itemValue="radio4"/>
            <apex:selectOption itemLabel="radio5" itemValue="radio5"/>
            <apex:selectOption itemLabel="radio6" itemValue="radio6"/>
        </apex:selectRadio>        
    </apex:form>
    <script type="text/javascript">
        var $j = jQuery.noConflict();
        $j(document).ready(function() {  
            $j('input:radio[name$=IdRedioBtnTemplateHostingFee]').change(function(){ 
                 $j('input:radio[name$=IdRedioBtnHostingBundles]').removeAttr('checked');
            });
            $j('input:radio[name$=IdRedioBtnHostingBundles]').change(function(){ 
                 $j('input:radio[name$=IdRedioBtnTemplateHostingFee]').removeAttr('checked');
            });        
        });
    </script>
</apex:page>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.