JSFiddle - React, Tailwind, and code Playground

by gigi81

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-darkness/jquery-ui.css">
Button with problems:
<input id="test" type="button" value="Self-Disable"/><br/>
<input id="test2" type="button" value="Enable"/>
<input id="test3" type="button" value="Disable"/>

<br/><br/>
<div><ul>
<li>'Self-disable' starts with a gray background</li>
<li>Clicking on enable/disble the buttons keeps the gray background when disabled</li>
<li>Now enable the button and click on 'Self-disable'</li>
<li>The button now has an azure background ????? Why is not gray?</li>
<li>Clicking on enable/disble the buttons keeps the azure background when disabled</li>
</ul></div>

<br/>
<div>
Cause of the problem:<br/>
Checking with firebug you can see that when clicking on the self-disable button it has the 'ui-state-hover' and 'ui-state-focus' classes, even if disabled.
</div>

JavaScript

$(function() {
    $('#test').button({ disabled: true });
    $('#test').click(function() {
        $('#test').button('disable');
    });
    
    $('#test2').button();
    $('#test2').click(function() {
        $('#test').button('enable');
    });
    
    $('#test3').button();
    $('#test3').click(function() {
        $('#test').button('disable');
    });
});