Removing disabled="true" does not allow form to submit

Question

I have an apex:commandButton which I use for uploading an attachment. This works ok but I want to disable the button until a user has actually browsed to and selected a file. What I have done is the following:

• When the page loads I have set the attribute disabled="true" on the apex:commandButton.
• Using jQuery I check for a change on the file element and remove the disabled="true" attribute when this occurs.
• My upload button now appears in an enabled state.
• However when I submit the button it does not call the controller function.

My form fields are as follows:

                                <div>
                                    <apex:inputFile value="{!attachment.body}" filename="{!attachment.name}" id="file" fileSize="{!fileSize}"/>
                                </div>
                                <div>
                                    <apex:commandButton id="upload" action="{!upload}" value="Upload" disabled="true"/>
                                </div>  

Does anyone know why it now appears enabled but does not actually submit when clicked? Any help on this would be appreciated. I have noted a similar question (Remove disabled attribute from command button) but the issue seems slightly different.

Thanks in advance.

Answer 1

I suggest instead that you leave the button enabled in the Visualforce so that Visualforce generates the normal client-side and server-side logic for the button. Then instead disable the button using jQuery when the page loads. That way when you re-enable via jQuery the button logic should work as normal.

(Otherwise changing the apex:commandButton from disabled to enabled probably requires a round-trip to the server via a re-render.)