make inputfield active on click of radio button

Question

I have one radio button and one inputfield..I am trying to achieve something like.if i click on the radio button , the input field should get active and user should be able to enter the value..If the radio button is not selected ..the field should be availabe but it should be disabled.

I have written something like below..but its not working

<input onclick ="document.getelementbyid('datepurchased').disabled =true;" type = "radio" name = "abc"></input>   
<apex:inputField id="datepurchased" value="{!lstRMA[0].Date_Purchased__c}"/>

can someone help?

Answer 1

Here is a working example with Radio button. On load the input field is disabled, when you click on radio button the input field will enable.

VF Page

<apex:page standardController="contact" extensions="radioActionCtrl"  >
    <apex:form >
        <apex:selectRadio >
            <apex:actionSupport event="onchange" action="{!changeInputState}" rerender="opPanelName"/>
            <apex:selectOption itemValue="" itemlabel="Option1"/>
        </apex:selectRadio>       
        <apex:outputPanel id="opPanelName">
            <apex:inputField value="{!contact.firstName}" id="NameInput" required="false"/>
            <script>
                document.getElementById('{!$Component.NameInput}').disabled = {!disableInput};
            </script>
        </apex:outputPanel>            
    </apex:form>
</apex:page>

Controller Extension

public class radioActionCtrl {
    public Boolean disableInput {get; set;}
    public radioActionCtrl(ApexPages.StandardController controller) {
        disableInput = true;
    }    
    public void changeInputState(){
        disableInput = false;
    }
}

Hope this will help.

Answer 2

Here is a example...

<apex:pageBlock id="tBlock"> 
        <apex:outputLabel value="Checkbox" for="theCheckbox" />  
            <apex:inputCheckbox value="{!customObject.CheckBox__c}" id="theCheckbox">
                <apex:actionSupport event="onchange" rerender="tBlock"/>  
            </apex:inputCheckbox>   

            <apex:outputLabel value="Enter Data Here" />  
            <apex:inputText value="{!customObject.TextField__c}" disabled="false" rendered="{!(customObject.CheckBox__c == true)}"/>  
            <apex:inputText value="{!customObject.TextField__c}" disabled="true" rendered="{!(customObject.CheckBox__c != true)}"/>  

            <!-- If you only want a field to show up when you check the box See below -->  
            <apex:inputText value="{!customObject.TextField__c}" rendered="{!(customObject.CheckBox__c == true)}"/>  
    </apex:pageBlock>  

For additional information on the tag, you can go to the following link as well: http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_outputLabel.htm

I also use these pages for additional Visualforce reference: http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#CSHID=pages_compref_outputLabel.htm|StartTopic=Content%2Fpages_compref_outputLabel.htm|SkinName=webhelp

I hope this helps out.

Thanks!

Aryan!