JavaScript Jquery如果另一个等于100，则禁用文本输入

Question

因此，我正在构建一个收集项，如果一个总数等于= 100，我将尝试禁用输入字段，基本上当.level1atotal = 100时，请禁用level3ainput，请参见下面的代码。所有帮助将不胜感激。

如果任何人都可以整理代码，以免不必每次都构建hide / show函数，那将很酷，我一时陷入困境，无法进一步完善它。

请注意，这将进入一个平台，该平台将使用id =“”作为存储变量数据的地方，因此，如果您可以避免使用id =“”那将是完美的选择。

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>