0

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

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

我不确定从哪里开始，因为这是新的，所以如果有人能帮助解决这个问题，那就太酷了。

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

    $(".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) + '%');

    });
});

以上是我所做的最新工作，但是它没有正确添加 %，有什么想法吗？

4

1 回答 1

1

这是我制作的一个 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>%
于 2013-05-21T14:59:25.190 回答