使用Java启用/禁用按钮

Question

Problem : I have an apex:commandButton on a VisualForce page, and a js file with some logic in it. Currently, this logic affects whether the button is visible or invisible on the page, using css. I need to change this so it makes the button enabled or disabled. However, whenever I try to disable the button in the js file, the onscreen button doesn't get affected. I am not experienced with front-end dev so may be missing or misunderstanding something obvious.

Button on .page file :

    <apex:commandButton id="commitButton"
        action="{!commitSelectedLines}"
        value="{!$Label.commitSelectedLines}"/>

.js file (heavily edited down to the seemingly relevant bits) :

FFDCBalancer = (function(){

    /**
     * Singleton Balancer object to maintain balances on the page.
     */
    var balancer = {

        /** JQuery button component for the commit button. */
        cmdCommit: undefined,

        /** Set the enabled-ness of the commit button. */
        setCommitEnabled : function(value) {
            //I PRESUMABLY NEED TO CHANGE THIS BIT TO USE 'DISABLED'.
            this.cmdCommit.css({
               'display': value ? 'block' : 'none'
            });

            //I HAVE TRIED VARIOUS BITS OF CODE, SUCH AS THIS
            //this.cmdCommit.disabled = value;

        },

        /**
         * Respond to refresh by connecting event handlers and calculating the balances.
         */
        onRefresh : function () {
            var me = this;
            me.cmdCommit = $FFDC('#commitButton');
        }
    };

    $FFDC(document).on('FFDCRefresh', function(){ balancer.onRefresh(); });
    return balancer;
}());

Answer 1

For this, you can do one of two things:

1. Use the {!$Component...commitButton} to get the client-side ID, though it can really mess JQuery up, since it adds a colon between the IDs, so you'll have to use it in combination with document.getElementById(...) - For example:

   jQuery(document.getElementById('{!$Component.Form.commitButton}')).attr('disabled','disabled');

2. Put a "styleClass" on the button, and change it using that:

   <apex:commandButton id="commitButton" action="{!commitSelectedLines}" value="{!$Label.commitSelectedLines}" styleClass="commitButtonClass" />

Then use jQuery to set the attribute:

jQuery(".commitButtonClass").attr('disabled','disabled');