在visualforce中选中复选框后显示文本字段

时间:2011-12-20 16:36:23

标签: salesforce visualforce

我有一个要求,当选中复选框时,必须使文本字段可编辑或呈现,我该如何实现?

2 个答案:

答案 0 :(得分:11)

这是一个严格的Visualforce代码示例,它也可以运行:

<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>

除此之外,如果您希望在Apex中进行进一步处理,可以在动作支持中添加动作,如下所示:

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

希望有所帮助

答案 1 :(得分:2)

您可以使用javascript切换文本输入元素的disabled属性。下面是一个示例页面,显示了如何,请注意,这里有一些奇怪的东西。

首先,如果您最初使用disabled="true"上的<apex:inputText>禁用该字段,那么即使您启用了该字段,输入的值也会发送回控制器,因此使用javascript禁用加载字段。我相信这是为了防止在开发人员指定应该禁用它时更新字段值的任何可能性。

第二个奇怪的一点是,即使您将element.disabled设置为“disabeld”来禁用元素,要检查它是否已禁用,您必须将其视为布尔值!

<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>

要在没有javascript的情况下完成所有这些操作,我想你会根据复选框字段的值设置<apex:inputText>的已禁用属性,然后使用<apex:actionSupport>标记来触发操作复选框更改并指定<apex:inputText>属性中rerender的ID。您还必须将其包装在<apex:actionRegion>中以防止其他字段被发送并导致验证错误(如果未填写必填字段等)。这也意味着您必须等待请求更改状态文本字段,因此javascript是速度的最佳途径。