Render custom controls on NewForm using JsLink

Context: I did work on JS Link in the past but one of my fiend wants me to create an example in JsLink so that he can later use it as a foundation for his work. So I created a following example for him. When a user clicks on 'New Item' on a custom SharePoint list named as 'Quiz', he is going to see custom rendering of controls using JS Link .

First, I created a custom list 'Quiz' and added two columns and later attached my JsLink file to the Webpart by navigating to the properties on Default NewForm. I upload my script (JS Link code) to the SiteAssets/js/QuizTimeLimit.js. For reference, please follow the steps in the image;

The Javascript code to render my custom controls using JS Link is as follows;

(function () {

//   Initialize the variables for overrides objects
 var overrideCtx = {};
 overrideCtx.Templates = {};   
 overrideCtx.Templates.Fields = {
  'TimeLimit': { 'EditForm': renderJsLinkCtrls,
        'NewForm': renderJsLinkCtrls},
  'EnableTime':{'EditForm': renderJsLinkCtrls,
        'NewForm': renderJsLinkCtrls}
 };
  
    /*
     * Register the template overrides.
     */   
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
 
})();

// Main function to render the custom controls via JsLink 
function renderJsLinkCtrls(ctx)
{
 switch (ctx.CurrentFieldSchema.FieldType) { 
  case "DateTime": 
            return FieldTimeLimit_Display(ctx);
  case "Choice": 
   return FieldTimeEnabled_Display(ctx);
 }  
}

// Render TimeLimit field by adding custom input field with font color red.
function FieldTimeLimit_Display(ctx) {
 
 if (ctx == null || ctx.CurrentFieldValue == null)
  return '';

 var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
 if (formCtx == null || formCtx.fieldSchema == null)
 return '';

 var fldId = "txtTimeLimit";
 var fldName = formCtx.fieldName;
 
  // Register a callback just before submit. 
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {           
  return  document.getElementById(fldId).value;  
    }); 

 var txtTimeLimit = "";
 return txtTimeLimit;
}

// Render EnableTime field by adding custom CheckBox field and registering its Click event.
function FieldTimeEnabled_Display(ctx) {
 
 if (ctx == null || ctx.CurrentFieldValue == null)
  return '';

 var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
 if (formCtx == null || formCtx.fieldSchema == null)
 return '';

 var fldId = "chkbxEnableTimeLimit";  
 // Register the click event of checkbox
 formCtx.registerInitCallback(formCtx.fieldName, function () {
  var chkbxEnableTimeLimit = document.getElementById(fldId); 
  chkbxEnableTimeLimit.addEventListener('click', TimeLimitChecked); 
 });
 
  // Register a callback just before submit. 
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {           
  return  document.getElementById(fldId).value;  
    }); 

 var cbxEnableTimeLimit = "Enable Time Limit";
 return cbxEnableTimeLimit;
}

// If CheckBox marked then enable TimeLimit custom html control.
function TimeLimitChecked(){
 var oTimeLimit = document.getElementById("txtTimeLimit");
 var oChkbxEnableTimeLimit = document.getElementById("chkbxEnableTimeLimit"); 
 if(oChkbxEnableTimeLimit.checked == true){
  oTimeLimit.disabled = true;
 }
 else{
  oTimeLimit.disabled = false;
 }
}