Enabling a disabled button using Javascript in visual force negates its 'action'

Question

So I'm trying to enable the search button (default disabled) after a select option is selected other than --None-- using Javascript. It works totally fine except after the button becomes enabled, clicking it performs no action. Can anybody tell me why and how to enable it properly?

Heres the page block section of my visual force:

                <apex:pageblocksectionitem id="cpbsi">
                        <apex:outputlabel value="Select Category: " />
                    <apex:outputpanel >
                        <apex:selectlist id="sl" value="{!selectedCategory}" size="1" styleclass="inputStyle" onfocus="categoryFocus(), categoryColorFocus()" onchange="categoryColorFocus()" onblur="categoryBlur()">
                            <apex:selectoptions id="slv" value="{!categoryOptionsList}" />
                        </apex:selectlist>
                        <apex:outputlabel value=" " />
                        <apex:commandbutton id="search" value="Search" action="{!categorySearch}" rerender="products, errorSection, categories" styleclass="submitButtonStyle" disabled="true"/>
                    </apex:outputpanel>
                </apex:pageblocksectionitem>

Here's the Javascript that enables the button:

    <script>
    function categoryColorFocus() {
        var test = document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.sl}').value;
        if (test.length == 0) {
            document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.sl}').style.cssText = "box-shadow: 0 0 10px #ff6666; border: 1px solid #ff1a1a;";
        } else {
            document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.sl}').style.cssText = "box-shadow: 0 0 10px #00e600; border: 1px solid #00b300;";
            document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.search}').disabled = false;
        }
    }
    </script>

Don't mind the styling code, just the lines that enable/ disable the button

Answer 1

We have used disable="true" and action="{!categorySearch}" directly in commandbutton and when it executes it replaces action with onclick="return false". Now when we enable the command button which is now input tag with type="submit" will have onclick="return false", so anyhow the action will not work.

Solution : In javascript when enabling button, call an actionfunction using below code :

document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.search}').disabled = false;
categorySearchAction();

<apex:actionFunction name="categorySearchAction" action="{!categorySearch}" rerender="products, errorSection, categories>

Answer 2

Looks like we can't enable or disabled the command button.

In place of command button create a <input type="button" value="save" onclick="ActionFunction()"/>

and in your javascript try to enable or disable this html input button.