一旦总和达到100，就禁用其余的数字框

Disable rest of the numeric boxes once sum reaches 100

本文关键字：数字      更新时间：2023-09-26

我正在进行一个设置，在该设置中，表中有多行要求输入数字。一旦总和达到100，我想禁用其余的文本框。

我的警报状态正常，但无法选择空文本框来禁用它们。此外，只有当我在第一个输入框中输入100时，警报才起作用。对于其余的盒子，甚至警报也不起作用。

请帮忙，下面是我的代码-

function checkTotal() {
    var sum=0;
    $("#fieldset_Q14 table tbody tr").each(function() {
        sum += parseInt($(this).find("input:text:last").val());
        if (sum==100) {
            //alert("test");
            $("input:text[value='']").prop('disabled',true);
        }
        else{
            $("input:text[value='']").prop('disabled',false);
        }
    })
}
$(document).ready(checkTotal);
$("input:text").keyup(checkTotal);

问题出在这行代码上。

sum += parseInt($(this).find("input:text:last").val());

当您parseInt空文本框时，它将返回NaN。。所以你必须小心在楠的情况下返回0。将以上行更改为

sum += parseInt($(this).find("input:text:last").val()) || 0;

此外，您必须使用此代码过滤掉所有空的inputs

$('input:text').filter(function() { return $(this).val() == ""; })

然后禁用它。

这是一个工作Fiddle

尝试使用此代码，我认为此代码将满足您的需求：）

            function checkTotal() {
                var sum=0;
                $("#fieldset_Q14 table tbody tr").each(function() {
                    sum += parseInt($(this).find("input:text:last").val());
                    if (sum==100) {
                        //alert("test");
                        $("input").each(function(){
                            if($(this).val() == '')
                                $(this).prop('disabled', true);
                        });
                    }
                    else{
                        $("input").each(function(){
                            if($(this).val() == '')
                                $(this).prop('disabled', false);
                        });
                    }
                });
            }

您的求和不起作用，因为当您尝试对空值求和时，它会生成NaN结果。此外，您还可以在完成总和计算后比较结果。

function checkTotal() {
var sum=0;
$("#fieldset_Q14 table tbody tr").each(function() {
    var num = parseInt($(this).find("input:text:last").val()) || 0;
    sum += parseInt(num);
});
if (sum==100) {
  $('input:text').filter(function() { return this.value == ""; }).prop('disabled',true);
}
else {
  $('input:text').filter(function() { return this.value == ""; }).prop('disabled',false);
}

}

请参阅https://jsfiddle.net/p556xprt/作为一个工作示例。

相关文章：