javascript - 如何禁用选择中的错误选项取决于所选选项？

Question

我想创建一个简单的数学练习 js 脚本。

例如：给定总和（=10），并且有四个选择，数字从 0 到 10。如果我选​​择一个数字，我应该禁用错误的选项。我的意思是，所选选项的总和不能大于 10。

我试过这样：点击这里

$(document).on("change", "select.number", function(){
    var sum = 10;
    var number = $(this).children("option:selected").val();
    var sum_number = 0;

    $("select.number option:selected").each(function(){
        sum_number = parseInt($(this).val(),10) + parseInt(sum_number,10);
    });    

    $("select.number option").attr("disabled", false);

    if(sum_number>0){
        var act_person = act_max_person = 0;
        $("select.number").each(function(){
            $(this).children("option:not(:first)").each(function(){   // first is 0
                if(parseInt($(this).val(),10) + parseInt(sum_number,10) > sum) $(this).attr("disabled", true);
            });
        });
    }
});

但它远非完美......

Answer 1

尝试

$(document).on("change", "select.number", function () {
    var sum = 10;
    var number = $(this).children("option:selected").val();

    var sum_number = 0;
    $("select.number option:selected").each(function () {
        sum_number += parseInt($(this).val(), 10);
    });

    $('select.number option').prop('disabled', false);
    if (sum_number > 0) {
        var diff = sum - sum_number;
        $('select.number').each(function () {
            var idx = parseInt($(this).val(), 10) + diff + 1;
            $(this).find('option').slice(idx).prop('disabled', true)
        })
    }
});

演示：小提琴