[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


  • 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" />

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.


<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(){
   } else {
      // add any other stylistic attributes to make it appear disabled

<!-- 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();" />
&nbsp; <!-- might need a second item here for VF tag pageBlockSectionItem -->