How to Remove disable attribute from a button after input validation?

Question

I have a form with a disabled button at first and if you leave an input empty or fill it with anything but numbers it will raise an error and if you insert number the error will be removed. My question is how can I remove disable attribute from the button after all inputs are error free. Here what I've tried so far:

$("input").blur(function () {
  if (!Number($(this).val()) || $(this).val() === "") {
    $(this).addClass("raise-error");
  } else {
    $(this).removeClass("raise-error");
  }
});

* {
  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" />
            <div class="error">number please</div>
          </div>
          <div class="input-field">
            <label for="record-2"> Record 2</label>
            <input type="text" id="record-2" />
            <div class="error">number please</div>
          </div>
          <div class="input-field">
            <label for="record-3"> Record 3</label>
            <input type="text" id="record-3" />
            <div class="error">number please</div>
          </div>
        </div>
      </div>
      <button class="btn" disabled>Submit</button>

Answer 1

• You can give the inputs a default attribute like data-valid="false".
• When a field is blurred, you can change the attribute's value to true after successfully validating it.
• You can then enable the button if all the data-valid="false" are changed to data-valid="true"

Try this

$("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');
});

* {
  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;
}

<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>
      <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>