JSFiddle - React, Tailwind, and code Playground

HTML

<BODY STYLE="background-color: yellow" onload="LoadImages();ResetBoard();myBallsLeft();">

<FORM NAME="bingo">
<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" STYLE="background-color: white; border: 2px 

solid #FF3399 ridge">
<TR>
<TD COLSPAN="2">

</td>
</tr>
<TR HEIGHT="20" BGCOLOR="YELLOW"><TD width="45%"><CENTER>


<INPUT TYPE="BUTTON" id="aaa" style="font-size:18px" VALUE="CALL NEXT BALL" ONCLICK="threesectimer();">  <INPUT TYPE="TEXT" 

style="color:blue;font-size:22px;text-align:center;" SIZE="3" NAME="output" READONLY>

&nbsp;&nbsp;&nbsp;

<DIV>
<BIG><BIG>Timer 
<form name="timeronoff"> 

<input type="radio" name="group2" id = "timeron" value="on" onchange="threesectimer();" checked> 

ON 
<input type="radio" name="group2" id = "timeroff" value="off" onchange="threesectimer();"> OFF
</big></big>

</form>

</div>

</div>

</center>

JavaScript

function threesectimer(){

    if(document.getElementById('timeron').checked){
        $('#aaa').click(function() {
            var aaa =  $(this);
            console.log(aaa);
            aaa.prop('disabled', true);
            setTimeout(function() {
                aaa.prop('disabled', false);
            }, 3000);
        });
    } else if(document.getElementById('timeroff').checked) {
        $('#aaa').click(function() {
            var aaa =  $(this);
            console.log(aaa);
            clearTimeout(timer);
            aaa.prop('disabled', false);
        
        });
    }
}