Display a text field after a checkbox is checked in visualforce

Question

I have a requirement in which a Text field has to be made editable or rendered when a check box is checked, how can I achieve this?

Answer 1

Here's a strictly Visualforce code sample that will work as well:

<apex:pageBlock id="theBlock">
   <apex:inputCheckbox value="{!theSObject.CheckBox__c}">
      <apex:actionSupport event="onchange" rerender="theBlock"/>
   </apex:inputCheckbox>

   <apex:inputText value="{!theSObject.TextField__c}" disabled="false" rendered="{!(theSObject.CheckBox__c == true)}"/>
   <apex:inputText value="{!theSObject.TextField__c}" disabled="true" rendered="{!(theSObject.CheckBox__c != true)}"/>

   <!-- Or to simply have a field that appears only when the box is checked -->
   <apex:inputText value="{!theSObject.TextField__c}" rendered="{!(theSObject.CheckBox__c == true)}"/>
</apex:pageBlock>

In addition to this, you can add an action in the action support if you wish to do further processing in Apex, like this:

<apex:actionSupport event="onchange" action="{!myMethod}" rerender="theBlock"/>

Hope that helps

Answer 2

You can use javascript to toggle the disabled attribute of the text input element. Below is a sample page showing how, note, there are a few oddities in here.

First, if you disable the field initially using disabled="true" on the <apex:inputText> then even if you enable it, values entered will not be sent back to the controller, hence disabling the field on load with javascript. I believe this is to prevent any chance of updating a field's value when the developer has specified that it should be disabled.

The second odd point is that even though you set element.disabled to "disabeld" to disable an element, to check whether it is disabled you have to treat it as a boolean value!

<apex:page standardController="Contact">
    <apex:form >
        <script type="text/javascript">
            function ToggleInput(theId)
            {
                var e = document.getElementById(theId);

                if(e != null)
                {
                    e.disabled = (e.disabled ? false : "disabled");
                }
            }

            window.onload = function () { document.getElementById('{!$Component.textInput}').disabled = "disabled"; }

        </script>
        <apex:inputCheckbox onchange="ToggleInput('{!$Component.textInput}');" value="{!Contact.Some_Checkbox__c}"/>
        <apex:inputText id="textInput" value="{!Contact.Some_Text_Field__c}"/>
        <apex:commandButton action="{!Save}" value="Update"/>
    </apex:form>
</apex:page>

To do all this without javascript, I imagine you'd set the <apex:inputText>'s disabled attribute based on the value of the checkbox field, then use an <apex:actionSupport> tag to fire an action when the checkbox changes and specify the id of the <apex:inputText> in the rerender attribute. You'd also have to wrap it in an <apex:actionRegion> to prevent other fields being sent and causing validation errors if required fields aren't filled etc.. This also means you have to wait for a request to change the state of the text field, so the javascript is the best route for speed.