How to disable a radio button on visualforce page?

Question

I am having a Radio button having values Yes, No. On selecting Yes I need to disable another radio button present on the same page. How this can be done. Please help ???

Answer 1

You can use apex:actionsupport to do this the SF Way:

A simple VF Page:

<apex:page controller="TestController">
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection>
                <apex:selectRadio label="Should the next question be disabled?" value="{!disabled}">
                    <apex:selectOptions value="{!yesNo}"/>
                    <apex:actionSupport event="onclick" status="stat" action="{!test}" reRender="test"/>
                </apex:selectRadio>
                <apex:outputPanel id="test">
                    <apex:selectRadio value="{!country}" disabled="{!isDisabled}">
                        <apex:selectOptions value="{!items}"/>
                    </apex:selectRadio>
                </apex:outputPanel>
            </apex:pageBlockSection>
        </apex:pageBlock>
     </apex:form>
</apex:page>

And the controller:

public with sharing class TestController {
    public String country{get; set;}
    public String city{get; set;}
    public String disabled{get; set;}

    public Boolean getIsDisabled() {
        return 'Y'.equals(disabled);
    }
    public PageReference test() {
        return null;
    }

    public List<SelectOption> getYesNo() {
        List<SelectOption> options = new List<SelectOption>(); 
        options.add(new SelectOption('Y','Yes')); 
        options.add(new SelectOption('N','No')); 
        return options; 
    }

    public List<SelectOption> getItems() {
        List<SelectOption> options = new List<SelectOption>(); 
        options.add(new SelectOption('US','US')); 
        options.add(new SelectOption('CANADA','Canada')); 
        options.add(new SelectOption('MEXICO','Mexico')); return options; 
    }
}

Answer 2

I would suggest using jQuery or javascript to control if the fields are disabled. Salesforce lets you get the id for using javascript if you use {!$Component.idYouGaveYourElement} and that opens up a wide world of things you can do using javascript.

Answer 3

I recommend writing your own JavaScript (using jQuery) over apex:actionSupport too.

Example:

<apex:page >
    <apex:form >
        <apex:selectRadio id="radio-1" 
                          styleClass="radio radio-1" 
                          onclick="console.log('radio-1 pressed'); shouldDisableRadio(this,'2');" >
            <apex:selectOption id="radio-1-yes" itemLabel="Yes" itemValue="Yes" />
            <apex:selectOption id="radio-1-no"  itemLabel="No"  itemValue="No" />
        </apex:selectRadio>
        <apex:selectRadio id="radio-2" 
                          styleClass="radio radio-2" 
                          onclick="console.log('radio-2 pressed');" >
            <apex:selectOption id="radio-2-yes" itemLabel="Yes" itemValue="Yes" />
            <apex:selectOption id="radio-2-no"  itemLabel="No"  itemValue="No" />
        </apex:selectRadio>  
    </apex:form>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"/>
    <script>
        var j$=jQuery.noConflict();

        j$(document).ready(function(){
            console.log('jQuery is working.');
        });

        function shouldDisableRadio(thar,radioNum){
            console.log(j$(thar).val());
            if(j$(thar).val()=='No'){
                toggleRadio(radioNum,true);
            } else{
                toggleRadio(radioNum,false);
            }
        }

        function toggleRadio(radioNum,disabledValue){
            var radioString='radio-'+radioNum+'-';
            console.log(radioString);
            j$('.radio-'+radioNum).find('input').prop('disabled',disabledValue);  
        }
    </script>
</apex:page>

Answer 4

your below mentioned code to disable the radio buttons is not working for me. Please find my sample radio button code below.

 j$('.radio-'+radioNum).find('input').prop('disabled',disabledValue);  

Javascript code:-

function testmethod(rtQOptOut){
    if(rtQOptOut.value == 'Yes'){ 
        $j('.rtq').find('input').prop('disabled',true); 
    }       
}