JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<input type="text" id="test" value="Enabled"/>
<button id="disable">Disable</button>
<button id="enable">Enable</button>
<input type="checkbox" id="check1">
<button id="check">Check</button>
<button id="uncheck">Uncheck</button>

CSS

input {
    display: block;
    margin: 20px 0; 
}

JavaScript

// Plugin Code
jQuery.fn.disable = function( disable ) {
    if ( disable !== false ) {
        disable = true;
    }
    return this
        .prop( "disabled", disable )
        .trigger( "disabled" );
};

jQuery.fn.isDisabled = function(){
    return this[0].disabled;
};

jQuery.fn.check = function( check ) {
    if ( check !== false ) {
        check = true;
    }
    return this
        .prop( "checked", check )
        .trigger( "checked" );
};

jQuery.fn.isChecked = function() {
    return this[0].checked;
};
    
// Example
$("#enable").click(function(){
   $("#test").disable( false ); 
});

$("#disable").click(function(){
   $("#test").disable();
});

$("#test").bind( "disabled", function() {
    $(this).val( $(this).isDisabled() ? "Disabled" : "Enabled" );
});
    
$("#check").click(function(){
   $("#check1").check(); 
});

$("#uncheck").click(function(){
   $("#check1").check( false );
});