0

I have visualforce page that renders the data in apex:pageBlockTable I have checkbox with button, I'm trying to acheive the following:

  • When the page loads I want the button to be disabled
  • If the checkbox is not checked then button is disabled
  • If the checkbox is checked then button is enabled

I have done the following:

Javascript page:

<script type="text/javascript"> 
    j$ = jQuery.noConflict();

   // $(document).ready(function(){
        alert('onload');
        document.getElementById("{!$Component.btn1}").attr('disabled', 
        true);
    //}); 


function docheckboxonClick(cb,itemId)
    { 
        if(cb.checked){ 
            alert('checked');
            document.getElementById("{!$Component.btn1}").removeAttr('disabled');;

        }
        else{                
            alert('unchecked');
            document.getElementById("{!$Component.btn1}").attr('disabled', true); //disable input
        }   
    } 
   </script>

Visualforce page:

<apex:pageBlockTable value="{!employees}" var="e" id="pbt">
   <apex:column headerValue="Check"> 
      <apex:inputCheckbox value="{!e.isSelected}" styleClass="chkSelected" onclick="docheckboxonClick(this,'{!e.Id}')"   />
  </apex:column>
  ...........
  ...........

<apex:commandButton value="select" action="{!someactin}" />

Does not seems to be working, what I'm missing here?

  • Is it one button, or one button per row? – sfdcfox Jul 10 '17 at 20:43
  • i missed the code, sorry, its one button. - updated my question. – Nick Kahn Jul 10 '17 at 20:45
0

If you have nested components, you need to use the entire path when using $Component. Example from the documentation:


<apex:page>
    <apex:pageBlock id="theBlock">
        <apex:pageBlockSection id="theSection" columns="1">
            <apex:pageBlockSectionItem id="theSectionItem">
                <apex:outputText id="theText">
                    Heya!
                </apex:outputText>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

document.getElementById(
    "{!$Component.theBlock.theSection.theSectionItem.theText}")

Also, if you're using apex:pageBlockButtons, the bottom button Id values will be modified with the value ":bottom".

Personally, I'd recommend just using Apex Code/Rerender if the performance is acceptable:


<apex:commandButton value="select" action="{!someactin}" disabled="{!btnDisabled}" />

public Boolean getBtnDisabled() {
    for(Wrapper employee: employees) {
        if(employee.isSelected) {
            return false;
        }
    }
    return true;
}

Actual code may depend on how the employee member is generated.

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.