[SalesForce] How to reproduce a field with disable checkbox with Visualforce

I'd like to reproduce the field that can be disabled with a checkbox with Visualforce.

enter image description here

Shortly:

  • A field should have label on the left side
  • There should be a red bar indicating requirement for both the field and checkbox
  • The field should be disabled/enabled on checkbox tick

I managed to solve first and get close to the second requirement with:

<apex:pageBlockSectionItem >
    <apex:outputLabel value="Opportunity Name" for="opp"/>
    <apex:outputPanel id="opp">
        <apex:inputField value="{!opportunity.Name}" required="true" />             
        <apex:inputCheckbox value="{!someMapping}" id="nooppti" />
        <apex:outputLabel value="Do not create a new opportunity upon conversion." for="nooppti" />
    </apex:outputPanel>
</apex:pageBlockSectionItem>

enter image description here

Best Answer

If this is a custom VF-page, I would use javascript to invoke the disable/enable action - probably with jquery

The other items you list are really just "stylist" items, for example, you can inherit some of the classes to recreate the "required" (red-line) style from VF-CSS that is available on each page. 

<apex:page>

<script type="text/javascript">
//note I'm using jQuery 'ends-with' style selector to find the VF elements on the page with jQuery
function disableEnableField(){
   if($('[id=$"enabledisablecheckbox"]').is(':checked')){ 
      $('[id$="mytextinput"]').removeAttr('disabled');
   } else {
      $('[id$="mytextinput"]').attr('disabled','disabled');
      // add any other stylistic attributes to make it appear disabled
   }
}
</script>

<apex:pageblock>
<apex:pageBlockSection>
<apex:pageBlockSectionItem>
<!-- using the requiredInput class on the output panel to get the red line -->
<apex:outputPanel styleClass="requiredInput" layout="block">
    <apex:inputField id="mytextinput" value="{!someObjectField}"/>
    <apex:inputCheckbox id="enabledisablecheckbox"onClick="disableEnableField();" />
</apex:outputPanel>
&nbsp; <!-- might need a second item here for VF tag pageBlockSectionItem -->
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock> 


</apex:page>
Related Topic