Aim: To achieve when a checkbox is selected button should show else hide.

enter image description here

<td><apex:inputCheckbox id="checkBoxId" value="{!a.selected}"
<apex:outputPanel id="displySelectedAccs">
   <apex:commandButton id= "displayButton" value ="getSelectedItems" action="{!getSelectedItems}"/>

In browser console, I see an error

Uncaught SyntaxError: missing )

after argument list.

I have tired Jquery hide()/show() listed in below link

To render a button based on a apex:inputcheckbox field

I am stuck. any inputs


Here's how I'd do it:

<apex:inputCheckbox id="checkBoxId" value="{!a.selected}"
<script type="text\javascript">
function toggledDisplay(){
     var checked = $j("[id*=checkBoxId]").is(':checked');
     if (checked){
         //I usually use jQuery show/hide
     else {

  • could you provide an explanation rather than just dumping code? thanks – glls Oct 9 '18 at 14:47
  • @Charlie123 Thanks, It worked! 1) but the requirement is changed. button should be grayed out instead of hide any inputs?I was able to hide. 2) but I am still not be able to understand document.getElementById(..) did not work. – Mentee Oct 9 '18 at 18:52
  • 1) you want to change the color of the button? Or disable it? I think some HTML objects have a "disabled" attribute, you might want to look into that 2. Visualforce adds a bunch of characters to the beginning of IDs in the actual HTML it generates. That's why document.getElementByID() wasn't working for you. The * in the [id*=...] jQuery selector is a wildcard, basically selecting an element with the id that ends with "checkBoxId." – Charlie123 Oct 10 '18 at 16:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.