Отображать текстовое поле после того, как флажок установлен в visualforce

Question

У меня есть требование, при котором текстовое поле должно быть редактируемым или отображаемым, когда установлен флажок, как мне этого добиться?

Answer 1

Вот пример кода 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"/>

Надеюсь, что поможет

Answer 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, я полагаю, вы установили бы атрибут disabled <apex:inputText> на основезначение поля флажка, затем используйте тег <apex:actionSupport> для запуска действия при изменении флажка и укажите идентификатор <apex:inputText> в атрибуте rerender.Вы также должны были бы обернуть его в <apex:actionRegion>, чтобы предотвратить отправку других полей и вызвать ошибки проверки, если обязательные поля не заполнены и т. Д. Это также означает, что вам придется ждать запроса на изменение состояния текстаполе, поэтому javascript является лучшим маршрутом для скорости.