JSFiddle - React, Tailwind, and code Playground

by Daniel DeGroff

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

    1. Type 'test' in the text box<br>
2. Click 'Button'<br>
3. Place cursor back in the text box
    <br><br>
<input type="text" id="control">

    <br><br>
        
<button type="button" id="button">Button</button>
<div id="radioSet">
	<input type='radio' name="radio" id='radio1' checked>
    <label for='radio1'>Radio1</label>
	<input type='radio' name="radio" id='radio2'>
    <label for='radio2'>Radio2</label>
</div>
<input type='checkbox' name="checkbox" id='checkbox' checked>
<label for='checkbox'>Checkbox / Toggle</label>
<br>
<div id='div'>div</div>
<br>
<a href="#" id="a">a</a>

JavaScript

$("#button").button();
$("#radioSet").buttonset();
$("#checkbox").button();
$("#div").button();
$("#a").button();

$("#control").blur(function() {
    $("#button").button( "disable" );
    $("#radioSet").buttonset( "disable" );
    $("#checkbox").button( "disable" );
    $("#div").button( "disable" );
    $("#a").button( "disable" );
});

$("#control").focus(function() {
    $("#button").button( "enable" );
    $("#radioSet").buttonset( "enable" );
    $("#checkbox").button( "enable" );
    $("#div").button( "enable" );
    $("#a").button( "enable" );
});