JSFiddle - React, Tailwind, and code Playground
HTML
<form id="" action="" method="post">
<input type="text" data-default="Carl" value="Carl" name="firstname" id="firstname" />
<input type="text" data-default="Johnson" value="Johnson" name="lastname" id="lasttname" />
<br />
<br />
<input id="female" type="radio" value="female" name="sex" data-default="0" />Female
<br />
<input id="male" type="radio" value="male" name="sex" data-default="0" />Male
<br />
<br />
<select id="country-list" name="countries" data-default="xx">
<option value="xx" selected="">Worldwide</option>
<option value="in">India</option>
<option value="il">Israel</option>
<option value="ru">Russia</option>
<option value="us">United States</option>
</select>
<br />
<br />
<button id="submit-data" disabled="" type="submit">Save changes</button>
</form>
JavaScript
var button = $('#submit-data');
$('form :input').not(button).bind('keyup change', function () {
// get all that inputs that has changed
var changed = $('form :input').not(button).filter(function () {
if (this.type == 'radio' || this.type == 'checkbox') {
return this.checked != $(this).data('default');
} else {
return this.value != $(this).data('default');
}
});
// disable if none have changed - else enable if at least one has changed
$('#submit-data').prop('disabled', !changed.length);
});