JSFiddle - React, Tailwind, and code Playground

by SpeakeazyYT

HTML

<div class="row">
    <div class="col-md-4">
        <input type="checkbox" name="garage" id="garage" onclick="validate('garage', 'ga_input')">
        <label for="garage">Гараж</label>
    </div>
    <div id="garage_area" class="col-md-8">
        <input type="number" placeholder="Укажите площадь гаража, м²" disabled="" name="garage_area" id="ga_input" onchange="changeText()">
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <input type="checkbox" name="aux_prem" id="aux_prem" onclick="validate('aux_prem', 'aux_prem_area_input')">
        <label for="aux_prem">Терраса</label>
    </div>
    <div id="aux_prem_area" class="col-md-8">
        <input type="number" placeholder="Укажите площадь террасы, м²" name="aux_prem_area" disabled id="aux_prem_area_input" onchange="changeText()">
    </div>
</div>

JavaScript

var garage_area = document.querySelector('#ga_input')
var aux_prem_area = document.querySelector('#aux_prem_area_input')

var ga_area_val_new = 0;

function validate(cbid, divid) {
  if ($("#"+cbid).is(':checked')) {
    $("#"+divid).prop('disabled',false);
  } else {
    $("#"+divid).prop('disabled',true);
    $("#"+divid).val(0);
    changeText();
  }
}

changeText();
function changeText() {
  setTimeout(function(){ 

    if (garage_area.value > 1000000) { garage_area.value = 0; }
    if (aux_prem_area.value > 1000000) { aux_prem_area.value = 0; }

    if (garage_area.value !== ""){ ga_area_val_new = garage_area.value; }

 
    TotalSquareHome = parseInt(ga_area_val_new);
    console.log(TotalSquareHome);
  }, 1);
}