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>

JavaScript

$(document).on("change", '[id$=ckbxEmp]', function () {       
    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? 4 : 12).css({
        background: ckd? 'yellow' : "lightgreen",
        width: ckd? 40 : 80
    }).val(function(i, v){
        // If checked, slice value to four characters:
        return ckd && v.length>4 ? v.slice(0,4) : $input.data("oldValue");
    });  
    $lbl.prop("content", ckd ? "SSN" : "ITIN");
}); 

$('[id$=txtbxSSNOrITIN]').click(function(){ alert('hit change' )})