Visualizzare un campo di testo dopo che una casella di controllo è selezionata in visualforce

Question

Ho un requisito in cui un campo di testo deve essere reso modificabile o reso quando una casella di controllo è selezionata, come posso ottenere questo risultato?

Answer 1

Ecco un strettamente Visualforce esempio di codice che funziona così:

<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 aggiunta a questo, è possibile aggiungere un'azione nel sostegno all'azione, se si desidera fare ulteriori elaborazioni in Apex, in questo modo:

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

Speranza che aiuta

Answer 2

È possibile utilizzare javascript per commutare l'attributo disabilitato dell'elemento di immissione del testo. Di seguito una pagina di esempio che mostra come, nota, ci sono alcune stranezze qui.

primo luogo, se si disattiva il campo usando inizialmente disabled="true" sul <apex:inputText> allora anche se lo si attiva, valori immessi non essere inviato al controller, quindi disabilitando il campo su carico con javascript. Credo che questo sia per prevenire ogni possibilità di aggiornare il valore di un campo quando lo sviluppatore ha specificato che dovrebbe essere disabilitato.

Il secondo punto strano è che anche se si imposta element.disabled su "disabeld" per disabilitare un elemento, per verificare se è disabilitato è necessario trattarlo come valore booleano!

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

di fare tutto questo senza javascript, immagino che ci si imposta attributo disabled 's il <apex:inputText> in base al valore del campo casella di controllo, quindi utilizzare un tag <apex:actionSupport> al fuoco un'azione quando cambia casella di controllo e specificare l'id di <apex:inputText> nell'attributo rerender. Dovresti anche racchiuderlo in un <apex:actionRegion> per impedire che altri campi vengano inviati e causare errori di convalida se i campi richiesti non sono compilati, ecc. Ciò significa anche che devi aspettare una richiesta per cambiare lo stato del campo di testo, quindi il javascript è il miglior percorso per la velocità.