Question

我有四个输入字段，希望将这四个输入分配到最多100％。因此，如果我在第一个输入中输入30，则其他三个输入应该最多为70.如果我向第二个输入添加25，则第三个和第四个输入应该最多为45个。不需要填充所有输入但它们必须在最后有100％（在一个或四个输入中并不重要）。

我该如何使这项工作？

我目前的代码如下：

$(".a_lock").change(function () {  // class of those input fields
        var val = $(this).val();
        var allInputs = $(".aufteilung input[type='number']"); // getting all input field in div 
        var proz = $("#proz").text();   // current percentage
        var diff = 100 - proz; // difference to 100%

        if (val > 100 || proz > 100) {
            allInputs.val(100 / allInputs.length);  // divide 100 to allInputs
            $("#proz").text(100); // set percentage to 100 (%)
        } else {
            var erg = +$("#a_gold").val() + +$("#a_silber").val() + +$("#a_platin").val() + +$("#a_palladium").val(); // make sum 
            $("#proz").text((erg).toFixed(2)); // format to 2 decimals
        }
});

编辑（HTML）：

<div class="rahmen aufteilung">
    <div class="col-md-2">
        <input type="radio" name="auft" id="auf_s" value="auf_s" checked="checked"/> <label for="auf_s">Standardaufteilung = 100% Gold</label>
    </div>
    <div class="col-md-2">
        <input type="radio"  name="auft" id="auf_a" value="auf_a" /> <label for="auf_a">Ich möchte eine andere Aufteilung:</label>
    </div>
    <div class="col-md-1">
        <input type="number" id="a_gold" step="0.1" min="0" max="100" value="0" class="form-control a_lock" readonly="readonly"/>% Gold
    </div>
    <div class="col-md-1">
        <input type="number" id="a_silber" step="0.1"  min="0" max="100" value="0" class="form-control a_lock" readonly="readonly"/>% Silber
    </div>
    <div class="col-md-1">
        <input type="number" id="a_platin" step="0.1"  min="0" max="100" value="0" class="form-control a_lock" readonly="readonly"/>% Platin
    </div>
    <div class="col-md-1">
        <input type="number" id="a_palladium" step="0.1"  min="0" max="100" value="0" class="form-control a_lock" readonly="readonly"/>% Palladium
    </div>
    <div class="col-md-1">
    = <span id="proz">0</span> / <b>100%</b>
    </div>
</div>

Answer 1

也许你正在寻找这样的东西：

var total = (inputs.map(function() {
    return +this.value;
})
.get())['reduce'](function(a, b) {
    return a + b;
});
proz.text( total );
if( total > 100) {
    this.value = 0;
    $(this).trigger('input');
}

＆＃13;

var inputs = $('.a_lock'),
    radios = $('.rahmen :radio'),
    proz = $('#proz');
inputs.on('input', function( ) {
    var total = (inputs.map(function() {
        return +this.value;
    })
    .get())['reduce'](function(a, b) {
        return a + b;
    });
    proz.text( total );
    if( total > 100) {
        this.value = 0;
        $(this).trigger('input');
    } else if(total == 100) {
        $('#auf_s').prop('checked',true).change();
    } else {
        $('#auf_a').prop('checked',true).change();
    }
})
.trigger('input');

radios.on('change', function() {
    var ofn = this.value == 'auf_a' ?  'readonly' : {readonly:'readonly'};
    inputs[this.value == 'auf_a' ? 'removeAttr' : 'attr'](ofn);
})
.change();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rahmen aufteilung">
    <div class="col-md-2">
        <input type="radio" name="auft" id="auf_s" value="auf_s" checked="checked"/> <label for="auf_s">Standardaufteilung = 100% Gold</label>
    </div>
    <div class="col-md-2">
        <input type="radio"  name="auft" id="auf_a" value="auf_a" /> <label for="auf_a">Ich möchte eine andere Aufteilung:</label>
    </div>
    <div class="col-md-1">
        <input type="number" id="a_gold" step="0.1" min="0" max="100" value="0" class="form-control a_lock" readonly="readonly"/>% Gold
    </div>
    <div class="col-md-1">
        <input type="number" id="a_silber" step="0.1"  min="0" max="100" value="0" class="form-control a_lock" readonly="readonly"/>% Silber
    </div>
    <div class="col-md-1">
        <input type="number" id="a_platin" step="0.1"  min="0" max="100" value="0" class="form-control a_lock" readonly="readonly"/>% Platin
    </div>
    <div class="col-md-1">
        <input type="number" id="a_palladium" step="0.1"  min="0" max="100" value="0" class="form-control a_lock" readonly="readonly"/>% Palladium
    </div>
    <div class="col-md-1">
    = <span id="proz">0</span> / <b>100%</b>
    </div>
</div>

＆＃13;

jquery输入字段分布

1 个答案: