[SalesForce] Use jquery to enable button

I have a pageblocktable something like this:

<apex:column>
    <apex:inputField value="{!opp.Name}" />
</apex:column>
<apex:column>           
   <apex:inputField value="{!opp.CloseDate}" />
</apex:column>
<apex:column width="2%">
   <apex:commandButton action="{!saveOpportunity}" value="Save" disabled>
      <apex:param value="saveOppId" name="column" assignTo="{!saveOppId}" >
      </apex:param>
    </apex:commandButton>
</apex:column>

I'm looking for a way to enable the save button when there is a change to any of the input fields in the row. There are many rows (opps) in the table so I want to only enable the button that goes with the row input field that changed. I looked at a few examples using jquery, but I could only find examples that disabled the button when it was clicked.

Best Answer

Here is a fairly simple implementation. It assumes you've added styleClass="monitored" to the input fields and styleClass="target" to the button fields (though you could use other selectors if you like).

The code disables all the buttons when the page is loaded and for a couple of different events re-enables the buttons by finding the parent "tr" and from there finding the child button.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function() {
    j$('.target').each(function() {
        j$(this)
            .attr('disabled', 'true')
            .addClass('btnDisabled')
            ;
    });
    j$('.monitored').bind('keyup change', function() {
        j$(this).closest('tr').find('.target')
            .removeAttr('disabled')
            .removeClass('btnDisabled')
            ;
    });
});
</script>

If you want to be more precise about the enabling, you can use the approach described in Monitoring a Form for Changes with jQuery.