JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<fieldset id="realButton">
    <legend>What would happen if we used real button</legend>
    <input type="text" />
    <button type="button" disabled="disabled" class="ui-button ui-widget ui-button-text-only"><span class="ui-button-text">Click me !</span></button>
</fieldset>

<fieldset id="jQueryButton">
    <legend>What happens with a jQuery button</legend>
    <input type="text" />
    <ul>
        <li>Click me !</li>
    </ul>
</fieldset>

<fieldset id="jQueryHack">
    <legend>What can happen using a hack for browsers that support capturing event</legend>
    <input type="text" />
    <ul>
        <li>Click me !</li>
    </ul>
    <input type="text" class="keydump" />
</fieldset>

CSS

.keydump { 
    opacity: 0; 
    filter:alpha(opacity=0);
    position: absolute;
}

#realButton > button {
    display: block;
}

fieldset {
    border: 1px solid #ccc;
    padding: 0.5em;
    margin: 0.5em;
}

JavaScript

/*
The real button shows the normal behaviour if we would not be using jQuery's button. We should be able to get this exact behaviour.
 */
$("#realButton").children('button').click(function() {
    alert('Hello ' + $(this).closest('fieldset').children('input:first').val() + ' !');
});

$('#realButton').children('input').change(function() {
    var self = $(this);

    if (self.val()) {
        self.closest('fieldset').find('.ui-button').removeAttr('disabled');
    }
    else {
        self.closest('fieldset').find('.ui-button').attr('disabled', 'disabled');
    }
});

/*
In this case, we use a jQuery button based on a li element. The change event is not triggered before the button click which cause an odd behaviour.
*/
$('#jQueryButton').find('li').button({
    disabled: true
}).click(function() {
    alert('Hello ' + $(this).closest('fieldset').children('input:first').val() + ' !');
});

$('#jQueryButton').children('input').change(function() {
    var self = $(this);

    self.closest('fieldset').find('.ui-button').button(self.val() ? 'enable' : 'disable');
});

/*
This final example use event capturing to relocate the focus manually before the click event is propagated to the target button. This forces the input to process its change event. 
*/
$('#jQueryHack').find('li').button({
    disabled: true
}).click(function() {
    alert('Hello ' + $(this).closest('fieldset').children('input:first').val() + ' !');
});

$('#jQueryHack').children('input').change(function() {
    var self = $(this);

    self.closest('fieldset').find('.ui-button').button(self.val() ? 'enable' : 'disable');
});

$('#jQueryHack').children('ul')[0].addEventListener('click', function() {
    $('.keydump')[0].focus();
}, true);