1

I have the following piece of code within a javascript popup

<apex:column headerValue="Select">
       <apex:inputcheckbox value="{!auth.IsSelected__c}" id="selectrecord"/>
</apex:column>

<button type="button" onclick="invokeSaveNew();  return false;" id="saveButton">Add</button>

I want the add button to render only when the apex:inputcheckbox is clicked by the user.

3 Answers 3

1

Use javascript for hide and show

<apex:column headerValue="Select">
    <apex:inputcheckbox value="{!auth.IsSelected__c}" id="selectrecord"     
        onclick="if(this.checked){ 
                   document.getElementById('saveButton').style.display='block';
                  }
                else
                {
                   document.getElementById('saveButton').style.display='none';
                 }"/>
 </apex:column>

<button style="display:none;" type="button" onclick="invokeSaveNew();  return false;" id="saveButton">Add</button>

Note: If you are using this in apex:pageBlockTable then you may need to create dynamic Id for each row and then it will work for each column.

7
  • it is giving me this error Error: APAuthors line 349, column 21: The value of attribute "onclick" associated with an element type "apex:inputcheckbox" must not contain the '<' character Error Error: The value of attribute "onclick" associated with an element type "apex:inputcheckbox" must not contain the '<' character. @Ratan
    – Rimii
    Feb 1, 2016 at 5:01
  • @Rimii there is already id specified to button.. NOw check my updated ans
    – Ratan Paul
    Feb 1, 2016 at 5:05
  • the button is disabled even after I have selected a checkbox @Ratan
    – Rimii
    Feb 1, 2016 at 5:09
  • @Rimii check my updated ans and check browser console if you are getting any error or not..
    – Ratan Paul
    Feb 1, 2016 at 5:19
  • I have one final problem. There are multiple rows of checkbox !auth.IsSelected__c. Even if I deselect one checkbox. the button is getting disabled. Is it possible to fix it. @Ratan
    – Rimii
    Feb 1, 2016 at 5:56
0

try this code

Javascript:

<apex:column headerValue="Select">
       <apex:inputcheckbox value="{!auth.IsSelected__c}" id="selectrecord" styleclass="isselected" onclick="disbutton();"/>
</apex:column>

<button type="button" style="display:none" onclick="invokeSaveNew();  return false;" id="saveButton">Add</button>

<script>
//first time check
var remember = document.getElementsByClassName('isselected');
  if (remember.checked){
    document.getElementById('saveButton').style.display = "block";
  }

function disbutton()
{
  var remember = document.getElementsByClassName('isselected');
  if (remember.checked){
    document.getElementById('saveButton').style.display = "block";
  }else{
   document.getElementById('saveButton').style.display = "none";
  }
}
</script>

Also check if first time your checkbox is checked then the button is displayed.

Or if you are thinking to use stnadard button then use rerender. Let me know if you face any issue.

0

Replace your code with this. I hope you are using jquery

<apex:column headerValue="Select">
       <apex:inputcheckbox value="{!auth.IsSelected__c}" id="selectrecord" onclick="renderSaveButton(this)"/>
</apex:column>

<button type="button" onclick="invokeSaveNew();  return false;" id="saveButton">Add</button>

    <script>
        function renderSaveButton(checkboxButton){

            if($(checkboxButton).is(':checked'))
                $('#saveButton').show();
            else
                $('#saveButton').hide();
        }

    </script>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .