Remove disable attribute from a button after input validation in JavaScript

In the below image provide, There are three input fields, which takes input of a number, When the input is provided it shall enable the submit button for submitting the form

The code which is mentioned below is the HTML for the form:

*HTML 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="some-container"> 
<div class="team team-a"> 
<h2>Team A Records</h2> 
<div class="record-box"> 
<div class="input-field"> 
<label for="record-1"> Record 1</label> 
<input type="text" id="record-1" data-valid="false" /> 
<div class="error">number please</div> 
</div>b 
<div class="input-field"> 
<label for="record-2"> Record 2</label> 
<input type="text" id="record-2" data-valid="false" /> 
<div class="error">number please</div> 
</div> 
<div class="input-field"> 
<label for="record-3"> Record 3</label> 
<input type="text" id="record-3" data-valid="false" /> 
<div class="error">number please</div> 
</div> 
</div> 
</div> 
<button class="btn" disabled>Submit</button> 
</div>

In the HTML form we have taken a container div in that placing the input fileds with their respective classes. In all the three input fields the initial data-valid property has been set to “false”.
Within the parent div, we have placed the Submit button which has the class as button and has the “disabled” property.
*CSS
The code mentioned below is the css for the input fields form.

 * { 
padding: 0; 
margin: 0; 
box-sizing: border-box; 
} 
body { 
font-family: "Montserrat", sans-serif; 
scroll-behavior: smooth; 
text-align: center; 
overflow-x: hidden; 
color: #08085c; 
background-color: #111; 
} 
.container { 
width: 80%; 
height: 50vh; 
background-color: #fff; 
margin: auto; 
display: flex; 
} 
.team { 
width: 50%; 
height: 100%; 
display: flex; 
flex-direction: column; 
gap: 10px; 
justify-content: center; 
align-items: center; 
} 
.team-a { 
background-color: bisque; 
} 
.error { 
text-align: right; 
color: red; 
opacity: 0; 
} 
.raise-error+.error { 
opacity: 1; 
} 
input.raise-error { 
border: 1px solid red; 
} 
.record-box { 
margin-top: 20px; 
} 
label { 
margin-right: 10px; 
} 
.btn { 
margin-top: 20px; 
padding: 10px 20px; 
cursor: pointer; 
}

* Jquery
This code is for the functionality of the button disabling and enabling:

$("input").blur(function() { 
if (!Number($(this).val()) || $(this).val() === "") { 
$(this).addClass("raise-error"); 
$(this).attr('data-valid', 'false'); 
} else { 
$(this).removeClass("raise-error"); 
$(this).attr('data-valid', 'true'); 
} 
$('.btn')[$('[data-valid="false"]').length > 0 ? 'attr' : 'removeAttr']('disabled', 'disabled'); 
});

The Jquery is where the logic for the input fields form is mentioned.
In the code, There is a function which consists of if ,else conditions.
The conditions are changed with the mentioned css classes.
Firstly if the Number input field value is empty then it adds a css class “raise-error”by using a method called addClass, which is used for adding a css class name for raising or giving a validation error message. In the if condition it also checks for the data-valid property is false . Whereas in the else condition it uses to removeClass method for removing the “raise-error” css class only when the data-valid property is true.
i.e when the number input fields are having some value.
Lastly, in the Jquery it adds that if submit button whose css class is “btn” and data-valid property of the filelds is false and the length of the input field value is greater than 0 use the “’removeAttr’”class with disabled property.
Once the form gets filled with number values it removes the error messages and enables the submit button. As shown in the picture below