I have two Checkbox that is used to lock a certain column. Now what I want to do is create a Java Script where in if the two checkboxes are checked An alert will show.

This is the code for the Checkboxes

<apex:inputCheckbox value="{!readOnly}">
                    <apex:actionSupport event="onchange" status="counterStatus" rerender="table2,panel1,counterStatus,pmsg"/>

<apex:actionSupport event="onchange"  status="counterStatus" rerender="table2,panel1,counterStatus,pmsg"/>

and this is the code for their corresponding Columns

<apex:column headerValue="Rec. End User Price">              
                    <apex:inputField value="{!myVar.item.Recommended_end_user_price__c}" rendered="{!NOT(readOnly)}">
                        <apex:actionSupport event="onchange" action="{!calculateRecEndUserDiscount}" status="counterStatus"  rerender="table2,panel1,counterStatus,pmsg"/>

                    <apex:outputField value="{!myVar.item.Recommended_end_user_price__c}" rendered="{!readOnly}"/>
  • @sfdcfox This is the code for my checkbox and column – JMDF Oct 19 '16 at 16:20
  • Did you mean to post this as an edit to an existing question? – Adrian Larson Oct 19 '16 at 16:23
  • 4
    Pls don't directly write to a person until he chimes in. In that case other people will ignore to help you – Santanu Boral Oct 19 '16 at 16:26
  • Well actually he asked me to create another question so that he can fully see my code. @SantanuBoral – JMDF Oct 19 '16 at 16:37
  • 1
    @JMDF in that case you should share question url with that person; – itzmukeshy7 Oct 19 '16 at 16:40

You can't combine an actionSupport with pure JavaScript, as far as I can tell, so you'll probably want to use JavaScript to call actionFunction elements instead.

function check(event, fn) {
    if(document.querySelectorAll('[data-single]:checked').length===2) {
        alert('Please choose only one.');
        event.target.checked = false;
    } else {

<apex:actionFunction name="method1" reRender="..." status="..." />
<apex:actionFunction name="method2" action="{!...}" reRender="..." status="..." />

<apex:inputCheckbox html-data-single="" onchange="check(event, method1)" />
<apex:inputCheckbox html-data-single="" onchange="check(event, method2)" />

You'll want to fill in the blank that I've left, but this should get you started.

Edit: Fixed unchecking action.

  • It's working now but what happens is after the alert appears, the 2nd checkbox is still checked. How can I do it that once the alert is shown, It will not click the 2nd checkbox. @sfdcfox – JMDF Oct 19 '16 at 18:06
  • @JMDF Something like this.checked = false; should do it. – sfdcfox Oct 19 '16 at 18:19
  • How can I do that? @sfdcfox. Thank you so much for the response, It's just that I am a beginner when it comes to javascript and my project requires me to use javascript. – JMDF Oct 19 '16 at 18:25
  • @JMDF Just put it in the same area as your alert. – sfdcfox Oct 19 '16 at 18:51
  • Unfortunately it's not working. – JMDF Oct 19 '16 at 18:59

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.