JSFiddle - React, Tailwind, and code Playground

by clayshannon

HTML

<input type="checkbox" id="ckbxEmp">Employee?
<input type="text" id="txtbxSSNOrITIN" maxlength="4" width="40">
<label id="lblSSNOrITIN">Bla</label>
</br>
<input type="text" id="txtbxFloat">
</br>
<input type="text" id="txtbxHopeFloats">
</br>
<input type="text" id="txtbxFloatingFreeAsABird">

JavaScript

$(document).on("change", '[id$=ckbxEmp]', function () {
    var ssnmaxlen = 4;
    var itinmaxlen = 12;
    var ssntextboxwidth = 40;
    var itintextboxwidth = 100;
    var ckd = this.checked;
    var $input = $('[id$=txtbxSSNOrITIN]');
    var $lbl = $('[id$=lblSSNOrITIN]');
    if (ckd) $input.data("oldValue", $input.val()); // Remember current value

    $input.prop("maxlength", ckd ? ssnmaxlen : itinmaxlen).css({
        background: ckd ? 'yellow' : "lightgreen",
        width: ckd ? ssntextboxwidth : itintextboxwidth
    }).val(function (i, v) {
        // If checked, slice value to ssnmaxlen characters:
        return ckd && v.length > ssnmaxlen ? v.slice(0, ssnmaxlen) : $input.data("oldValue");
    });
    //$lbl.prop("content", ckd ? "SSN" : "ITIN");
    $lbl.text(ckd ? "SSN" : "ITIN");

});

$(document).on("keypress", '[id*=Float]', function (e) { 
    //only allow 1..9 (48..57), '.' (46), and backspace (8)
    var k = e.which;
    if (k === 8 || k === 46) return;
    if (k < 48 || k > 57) { e.preventDefault(); }
});