function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Venkat adityaVenkat aditya 

In vf page i have a check box, when ever check box selected then only button in vf page should be visible, other wise button should not visible

Hi Professionals,  

I have a visualforce page, i have some components in vfpage, and i have check box component in vf page, and page block button called 'search' Now my scenario is when ever i checked the check box, then only vf page button(search) should be "Highlighten", If i should'nt check the checkbox then search button should not be in highlighten.  
Please help with this task.  

Thanks In advance. 
Best Answer chosen by Venkat aditya
LBKLBK
I didn't quite get the point "highlighten".

If you are talking about enabling / disabling a button, instead of hiding it, here is the code.
 
<apex:page >
<script language="javascript"> 
    function toggleVisibility()
    {
     var objCheck = document.getElementById('j_id0:j_id2:j_id3:j_id4:j_id5:MyCheckbox');
     var objButton = document.getElementById('j_id0:j_id2:j_id3:j_id4:j_id7:MyCommandButton');
    
     if(objCheck.checked)
     {
         //objButton.style.visibility='visible'; 
         objButton.className = 'btn';
         objButton.disabled = false; 
         
     }
     else
     {
         //objButton.style.visibility='hidden';
         objButton.className = 'btnDisabled';
         objButton.disabled = true;
     }
     return false;
    }
</script>
<apex:form >
    <apex:pageBlock >
        <apex:pageblockSection >
            <apex:pageblockSectionItem >
                Checkbox: <apex:inputCheckbox id="MyCheckbox" onchange="javascript:toggleVisibility();" selected="false"/>
            </apex:pageblockSectionItem>
            <apex:pageblockSectionItem >
            	<apex:commandButton id="MyCommandButton" value="Button" disabled="true"/>
            </apex:pageblockSectionItem>
        </apex:pageblockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>
Hope this helps.
 

All Answers

LBKLBK
You can do it with a simple Javascript method,

Here is the sample VF code.
 
<apex:page>
<script language="javascript"> 
    function toggleVisibility()
    {
     var objCheck = document.getElementById('j_id0:j_id2:j_id3:j_id4:j_id5:MyCheckbox');
     var objButton = document.getElementById('j_id0:j_id2:j_id3:j_id4:j_id7:MyCommandButton');
    
     if(objCheck.checked)
     {
         objButton.style.visibility='visible'; 
     }
     else
     {
         objButton.style.visibility='hidden';
     }
     return false;
    }
</script>
<apex:form >
    <apex:pageBlock >
        <apex:pageblockSection >
            <apex:pageblockSectionItem >
                Checkbox: <apex:inputCheckbox id="MyCheckbox" onchange="javascript:toggleVisibility();" selected="true"/>
            </apex:pageblockSectionItem>
            <apex:pageblockSectionItem >
            	<apex:commandButton id="MyCommandButton" value="Button"/>
            </apex:pageblockSectionItem>
        </apex:pageblockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>
Hope this helps.
 
Venkat adityaVenkat aditya
Hi LBK,

Thanks for you reply, But i missed a point in my requirement i,e., 

when ever first visualforce page is opened, Button should be there in visualforce page, but it should not be highlighten, when ever we check the check box then only it is Highlighten. 

I think now you can understand my requirement.

Thanks,
Aditya.






 
LBKLBK
I didn't quite get the point "highlighten".

If you are talking about enabling / disabling a button, instead of hiding it, here is the code.
 
<apex:page >
<script language="javascript"> 
    function toggleVisibility()
    {
     var objCheck = document.getElementById('j_id0:j_id2:j_id3:j_id4:j_id5:MyCheckbox');
     var objButton = document.getElementById('j_id0:j_id2:j_id3:j_id4:j_id7:MyCommandButton');
    
     if(objCheck.checked)
     {
         //objButton.style.visibility='visible'; 
         objButton.className = 'btn';
         objButton.disabled = false; 
         
     }
     else
     {
         //objButton.style.visibility='hidden';
         objButton.className = 'btnDisabled';
         objButton.disabled = true;
     }
     return false;
    }
</script>
<apex:form >
    <apex:pageBlock >
        <apex:pageblockSection >
            <apex:pageblockSectionItem >
                Checkbox: <apex:inputCheckbox id="MyCheckbox" onchange="javascript:toggleVisibility();" selected="false"/>
            </apex:pageblockSectionItem>
            <apex:pageblockSectionItem >
            	<apex:commandButton id="MyCommandButton" value="Button" disabled="true"/>
            </apex:pageblockSectionItem>
        </apex:pageblockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>
Hope this helps.
 
This was selected as the best answer
Venkat adityaVenkat aditya
Hi, 

Thanks LBK for your Answer.