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
Mak OneMak One 

I want to disable commandButton when 2 checkboxes are unchecked without using actionSupport. Is it a correct way?

Below is my script to disable/enable commandButton:

<script>
function func(){
if (document.getElementById('{!$Component.form1.orderedCheckBox}').checked
     || document.getElementById('{!$Component.form1.receivedCheckBox}').checked) {
         document.getElementById('{!$Component.form1.cButton}').disabled=false
         document.getElementById('{!$Component.form1.cButton}').setAttribute('class','btn');
} else {
         document.getElementById('{!$Component.form1.cButton}').disabled=true
         document.getElementById('{!$Component.form1.cButton}').setAttribute('class','btnDisabled');
}
}
</script>

So, indirectly is is disabling HTML commandButton (to which apex:commandButton is converted but Salesforce Controller will not know that).
Suppose if we do:

<apex:commandButton id="cButton" value="Click Here" action="{!method1}"
            disabled="true"/>

In this case javaScript will make it visible and clickable on HTML page if we check any checkbox but it will never call method method1() of Controller because according to Salesforce it is disabled and so redirect to same page without showing anything (any error or debug or anything).

So, it doesn't seem to be correct method and I don't want to use actionSupport for this as the effect will be delayed. Like when we uncheck a checkbox. It will take little time to make button disable. Also, I don't want to make communication through Salesforce happen only for this thing.

JQuery will also be doing same thing. It will not be changing real <apex:commandButton> but commandButton in HTML which Salesforce Server will not consider.

Also, I know from javaScript Console that we have to change class to 'btnDisabled' or 'btn'.
If in future Salesforce change the class names it uses my code will fail. So, assigning class to it also doesn't seem to be correct but without it the appearance will not change. Disabled commandButton will look like Enabled.

So, Is there any better/correct way to do this?
Best Answer chosen by Mak One
Amritesh SahuAmritesh Sahu
Hi Mak,

You can hide the button instead of disabling it.
Here's the code to hide it.
<script>
function func(){
if (document.getElementById('{!$Component.form1.orderedCheckBox}').checked
     || document.getElementById('{!$Component.form1.receivedCheckBox}').checked) {
         document.getElementById('{!$Component.form1.cButton}').style.visibility= 'visible';
} else {
         document.getElementById('{!$Component.form1.cButton}').style.visibility= 'hidden';
}
}
</script>

Hope this helps
Thanks.

All Answers

Amritesh SahuAmritesh Sahu
Hi Mak,

You can hide the button instead of disabling it.
Here's the code to hide it.
<script>
function func(){
if (document.getElementById('{!$Component.form1.orderedCheckBox}').checked
     || document.getElementById('{!$Component.form1.receivedCheckBox}').checked) {
         document.getElementById('{!$Component.form1.cButton}').style.visibility= 'visible';
} else {
         document.getElementById('{!$Component.form1.cButton}').style.visibility= 'hidden';
}
}
</script>

Hope this helps
Thanks.
This was selected as the best answer
Mak OneMak One
I want to disable it only. In Runtime hiding and displaying might not look good.
But thanks for your answer Amritesh Sahu.
Mak OneMak One
For each command button we can have 2 command buttons (1 is disabled which will not need any action and just for display and 1 is enabled 1 which is already there). So, when we have to disable we will set .style.visibility= 'hidden'; for enabled one and display disabled one by .style.visibility= 'hidden';
and vice versa.