Question

我在表单中有9个输入字段，我希望理想情况下执行以下操作：

每个输入的数值可以介于0到100之间
例如，如果我有30合1输入，30在另一个输入，40在另一个输入，它加起来100（％）并禁用任何其他字段，因为这是最大的，当然如果更改它将启用其他空字段所以可以添加一个值，直到它再次为100％
通过将输入的值加在一起实时显示总％，然后启用按钮

我不确定从哪里开始这个新的，所以如果有人会帮助这个真的很酷。

这是我所得到的，它需要添加一些东西来寻找改变以改变总价值，我知道它不是很多但是迄今为止我最好：

    $(".control-group input").change(function() {
    var fields = $(".control-group input");
    $(fields).each(function() {
        var num = parseInt(this.value, 10);
        if (!isNaN(num)) {
            total += num;
        }
        if (total == 100){
        // disable buttons
            console.log('max reached');
        } else {
            console.log('max not reached');
        }

        $("#total").text(String(total) + '%');

    });
});

以上是我所做的最新情况，但是没有正确添加％，任何想法？

Answer 1

Here是我制作的jsFiddle。这几乎就是我想你想要的。

JS：

$('input').keyup( function () {
    //limit the value to between 0 and 100
    var thisVal = parseInt($(this).val(), 10);
    if (!isNaN(thisVal)) {
        thisVal = Math.max(0, Math.min(100, thisVal));
        $(this).val(thisVal);
    }

    //get total of values
    var total = 0; 
    $('input').each(function() {
        var thisVal = parseInt($(this).val(), 10);
        if (!isNaN(thisVal))
            total += thisVal;
    });

    //enable submit button
    if (total == 100)
        $('#submit_button').removeAttr('disabled');
    else
        $('#submit_button').attr('disabled','disabled');        

    //update percentage
    $('#percent').html(total);
});

HTML：

<form class="control-group">
    <input></input>
    <input></input>
    <input></input>
    <input></input>
    <input></input>
    <input></input>
    <input></input>
    <input></input>
    <input></input>
    <input id='submit_button' type="button" value="Submit" disabled></input>
</form>
<span id="percent">0</span>%

jQuery多个输入字段，用于限制数字范围并计算为100％

1 个答案: