JavaScript Jquery Disable text inputs if another equals 100

Question

So I'm building a collection piece which I'm trying to disable input fields if the total of one is = to 100, basically when .level1atotal = 100 disable level3ainput please see below for code. All help would be greatly appreciated.

Also if anyone could tidy the code up so that the hide/show function doesn't have to be built up every time too that would be cool, I'm stuck at the minute and can't refine it any further.

Just to note, this will be going into a platform which will use id="" as a place to store data from variables, so if you can refrain from using id="" that would be perfect.

JS FIDDLE HERE

//BELOW CODE CONTROLLS HIDE/SHOW FUNCTION

//Hide show ALL LEVEL 2's and 3's When Level 1 is clicked
$(document).ready(function(){
    $(".level1a").click(function(){
        $(".level2a").toggle();
        $(".level3a").toggle();
        $(".level2b").toggle();
        $(".level3b").toggle();
    });
});


//Hide show ALL LEVEL 3a's When Level 2a is clicked
$(document).ready(function(){
    $(".level2a").click(function(){
        $(".level3a").toggle();
    });
});


//Hide show ALL LEVEL 3b's When Level 2b is clicked
$(document).ready(function(){
    $(".level2b").click(function(){
        $(".level3b").toggle();
    });
});






//BELOW CODE CALCULATES TOTAL

//Calculates the Total for 1a
$(document).on("change", ".level3a", function() {
    var sum = 0;
    $(".level3ainput").each(function(){
        sum += +$(this).val();
    });
    $(".level1atotal").val(sum);
});

$(document).on("change", ".level3b", function() {
    var sum = 0;
    $(".level3binput").each(function(){
        sum += +$(this).val();
    });
    $(".level1atotal").val(sum);
});



//Calculates the Total for 2a
$(document).on("change", ".level3a", function() {
    var sum = 0;
    $(".level3ainput").each(function(){
        sum += +$(this).val();
    });
    $(".level2atotal").val(sum);
});

//Calculates the Total for 2b
$(document).on("change", ".level3b", function() {
    var sum = 0;
    $(".level3binput").each(function(){
        sum += +$(this).val();
    });
    $(".level2btotal").val(sum);
});



//Sets values to 0
$(document).ready(function() {
        if ($('.level1atotal').is(':empty')) {
            $('.level1atotal').val('0');
        }
    });

$(document).ready(function() {
        if ($('.level2atotal').is(':empty')) {
            $('.level2atotal').val('0');
        }
    });
    
 $(document).ready(function() {
        if ($('.level2btotal').is(':empty')) {
            $('.level2btotal').val('0');
        }
    });
    
$(document).ready(function() {
        if ($('.level3ainput').is(':empty')) {
            $('.level3ainput').val('0');
        }
    });
    
 $(document).ready(function() {
        if ($('.level3binput').is(':empty')) {
            $('.level3binput').val('0');
        }
    });




$('.level3ainput').on('keyup keydown', function(e){
    console.log($(this).val() > 100)
        if ($(this).val() > 100 
            && e.keyCode != 46
            && e.keyCode != 8
           ) {
           e.preventDefault();     
           $(this).val(100);
        }
    });

/*
################
               BELOW IS CSS FOR THE PROJECT DETAILS
################
*/


.project{
  position:absolute;
  right:5%;
  margin:0px;
  height:60px;
  width:150px;
  border:5px;
  border-color:#000000;
  background-color:#20a6e3;
  cursor:pointer;
  border-radius: 10px;
  box-shadow: 3px 3px 5px grey;
  z-index:3;
}

.project:active,.level1a:active {
  background-color: #20a6e3;
  box-shadow: 3px 3px 5px grey;
  transform: translateY(4px);
}

.level2a:active,.level2b:active {
  background-color: #d3d3d3;
  box-shadow: 3px 3px 5px grey;
  transform: translateY(4px);
}



.container{
  width:60%;
  position:absolute;
  right:30%;
}


@media screen and (max-width: 700px) {
 .container{
  width:80%;
  position:absolute;
  right:10%;
} 

 .project{
   display:none;
 }
}



/*
################
               BELOW IS CSS FOR THE LEVELS
################
*/




.level1a{
  margin:0px;
  height:40px;
  width:100%;
  border:5px;
  border-color:#000000;
  background-color:#20a6e3;
  cursor:pointer;
  border-radius: 10px;
  box-shadow: 3px 3px 5px grey;
  position:relative;
  z-index:3;
}

.level2a,.level2b{
  cursor:pointer;
  border-radius: 3px;
  border:5px;
  height:35px;
  width:90%;
  background-color:#d3d3d3;
  box-shadow: 3px 3px 5px grey;
  position:relative;
  z-index:2;
  float: right;
  left:-5%;
  margin-bottom:5px;
}

.level3a,.level3b{
  border-radius: 3px;
  border:5px;
  border:color #000000;
  height:40px;
  width:80%;
  background-color:#ffffff;
  box-shadow: 1px 1px 1px 1px grey;
  position:relative;
  z-index:1;
  float: right;
  left:-10%;
}



/*
################
               BELOW IS CSS FOR THE INPUTS
################
*/



.level1atotal{
  padding:5px; 
  border:2px; 
-webkit-border-radius: 5px;
  border-radius: 5px;
  cursor: not-allowed;
  text-align:center;
  float:right;
  margin-top:9px;
  margin-right:10px;
  width:35.5%;
}

.level2atotal,.level2btotal{
  padding:5px; 
  border:2px; 
 -webkit-border-radius: 5px;
  border-radius: 5px;
  cursor: not-allowed;
  text-align:center;
  float:right;
  margin-top:7px;
  margin-right:5px;
  width:31%;
}

.level3ainput,.level3binput{
  padding:5px; 
  border:2px solid #d3d3d3;
-webkit-border-radius: 5px;
  border-radius: 5px;
  text-align:center;
  float:right;
  margin-top:10px;
  margin-right:5px;
  width:21%;
  height:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="project">

</div>

<div class="container">
<!–– LEVEL 1 ––>
<div class="level1a"><input type="text" class="level1atotal" value="" size="10" readonly onchange="myFunction()"></div>
<div class="level2a" style="display:none" ><input type="text" class="level2atotal" value="" size="10" readonly></div>
<div class="level3a" style="display:none" ><input type="text" class="level3ainput" value=""  size="10"></div>
<div class="level3a" style="display:none" ><input type="text" class="level3ainput" value=""  size="10"></div>


<div class="level2b" style="display:none" ><input type="text" class="level2btotal" value="" size="10" readonly></div>
<div class="level3b" style="display:none" ><input type="text" class="level3binput" value=""  size="10"></div>
<div class="level3b" style="display:none" ><input type="text" class="level3binput" value=""  size="10"></div>
</div>