JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<div class="flex-ctnr">
        <label class="control">
            <h4>Click to enable form elements:</h4> 
            <input type="checkbox">
        </label>
        <div>
            <h3>Text Field</h3>
            <input type="text" disabled>
        </div>
        <div>
            <h3>Radio Button</h3>
            <input type="radio" disabled>
        </div>
        <div>
            <h3>Check Box</h3>
            <input type="checkbox" disabled>
        </div>
        <div>
            <h3>Text Area</h3>
            <textarea cols="30" rows="10" disabled></textarea>
        </div>
    </div>

CSS

.flex-ctnr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

JavaScript

jQuery.fn.toggleAttr = function(attr) {
 return this.each(function() {
  var $this = $(this);
  $this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr);
 });
};

$(".control input").click(function(){
    $(this).parents().find("input, textarea").toggleAttr("disabled");
});