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" />
<br /><br />
<button id="mk1">Make</button>
<button id="mk2">Remake</button>

JavaScript

$("#mk1").bind('click', function (event) {    
    checkbox();
});

$("#mk2").bind('click', function (event) {
    $("#chkTesting").removeAttr("disabled");
    checkbox();
});

function checkbox() {
    $.each($(".inp-checkbox"), function(index, value) {
        $("label[for='" + $(value).attr('id') + "']").button('remove');
        $("label[for='" + $(value).attr('id') + "']").remove();
        
        $(value).prop({"type": "checkbox" })
            .val(false)
        .after($("<label />").attr({ for: $(value).prop('id')}))
        .button({text: false })
        .click(function (e) {
           alert("hello"); 
        });
    });
}