javascript - 按钮仅在用户对某个数字进行评分时才会出现或启用？

Question

我有一个单选按钮表单，其中每个选择都有一个数值。分数总计在表格的末尾。用户需要获得一定的分数才能提交申请。

我在 html 中禁用了提交按钮。我只需要在用户得分超过 60 分时启用它。我尝试了一些代码变体，但该按钮仍然处于禁用状态。谁能指出我正确的方向？

  </li>

  <p>Total Score:<span id="total">0</span></p>
     <input type="submit" name="submit_name" value="OK" 
   class="submit_class" id="SubmitButton" disabled/>
   </form>
   </body>

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

  <script language="javascript">
  $(":radio").on("change", function() {
    var total = 0;
    $(":radio:checked").each(function() {
      total += Number(this.value);
    });

    $("#total").text(total);
  });

  //ENABLE SUBMIT BUTTON CODE ACCORDING TO SCORE
 function submitOnly() {
 var current = $('.total').filter(':checked');

 if (current.score >= 60) {
sbmtBtn.disabled = false;
 }
 };
 </script>

 </html> 

Answer 1

在您的 jquery 中，您可以在每次分数变化时进行检查，如下所示:

$(":radio").on("change", function() {
  var total = 0;
  $(":radio:checked").each(function() {
    total += Number(this.value);
    if (total > 60) {
      $("#SubmitButton").prop('disabled', false);
    }
  });

  $("#total").text(total);
});

<p>Total Score:<span id="total">0</span></p>
<input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton" disabled />

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