JSFiddle - React, Tailwind, and code Playground

by Mansfield

HTML

<input type="checkbox" name="testing" id="chkTesting" value="false" disabled="disabled" class="inp-checkbox" />

<input type="checkbox" name="testing" id="chkTesting2" value="false" class="inp-checkbox" />

JavaScript

(function ($) {

    $.fn.checkbox = function (checked) {
        var newID;
        var self = this;

        if (self[0].nodeName !== "INPUT" || self[0].type !== "checkbox") {
            throw new Error("Element is not an html checkbox");
            return;
        }

        if (typeof (checked) === "undefined") {
            checked = _isChecked();
        }
        
        if (self.attr('id').startsWith("cbx-")) {
            newID = self.attr('id');
        } else {
            newID = "cbx-" + self.attr('id');
        }

        self.attr({ "id": newID })
            .prop({ "type": "checkbox" })
            .val(checked)
            .after($("<label />").attr({ for: newID }))
            .button({ text: false })
            .click(function (e) {
                _doSelect($(this));
            });

        return self;
        
        function _isChecked() {
            return self[0].checked;
        }

        function _doSelect(elem) {
            var x = elem.button("option", {
                icons: {
                    primary: elem[0].checked ? "ui-icon-check" : ""
                }
            });

            if (elem[0].checked) {
                x.val(true);
            } else {
                x.val(false);
            }
        }
    }

}(jQuery));

if (typeof String.prototype.startsWith != 'function') {
    String.prototype.startsWith = function (str) {
        return this.indexOf(str) == 0;
    }
}

$("#chkTesting").removeAttr('disabled');
$("#chkTesting").checkbox():

$("#chkTesting2").checkbox();