jquery - Disable submit button unless original form data has changed

Question

Here's the code I am using:

$('form').bind('keyup change', function(){

The submit button is set to DISABLED by default, if something changes inside a input text field, or radio button check state or drop-down selection value, then the button must be set ENABLED by removing the disabled attribute.

My END GOAL:

EDIT: If anything is changed back to its default value, the submit button shall be set to disabled by prop('disabled', true); - need some method to keep track of every change.

====================================================

Example: Go to Twitter, and sign-in, from the drop-down menu select Settings. In the Account Page, change your Username (just add an extra char), next scroll down, set a checkbox to checked, and change your country choice.

The button will be enabled at the bottom, go back and uncheck the checkbox you previously checked, the button at the bottom will remain enabled,

scroll to the top change your UserName back to what it was, scroll down the button to save changes will still be enabled, go to the country list and changed it back to what you previously had, now finally scroll down: the save changes button will be disabled.

====================================================

EDIT: this seems very similar, What is the best way to track changes in a form via javascript?

Quote: "You can render it disabled by default and have JavaScript handlers watching the inputs for change events to enable it. Maybe render some hidden fields or directly render JavaScript values to store the "originals" and, on those change events, check the current values against the originals to determine if the button should be enabled or disabled. – David Jan 18 at 15:14" (Enable 'submit' button only if a value in the form has been changed).

Answer 1

I know this is a late answer, but this method uses far less code than the accepted answer without needing IDs on fields and without storing a global array.

Simply use .serialize() to store the data and check if it matches on each change.

http://jsfiddle.net/Pug3H/2/

$('form')
    .each(function(){
        $(this).data('serialized', $(this).serialize())
    })
    .on('change input', function(){
        $(this)             
            .find('input:submit, button:submit')
                .prop('disabled', $(this).serialize() == $(this).data('serialized'))
        ;
     })
    .find('input:submit, button:submit')
        .prop('disabled', true)
;