Question

我正在尝试计算％share，它只是share1 + share2 == 100的加法。但是，我希望它仅在两个选中的复选框上起作用。

如何检测选定的复选框并相应地应用该功能？

var MAX = 2;
$('input.addnominee').click(function() {
    ($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled',true):$('input.addnominee').not(':checked').attr('disabled',false);
});
$("#share1").focusout(function() {
  var share1 = $("#share1").val();
  var answer = 100 - share1;
  $("#share2").val(answer);
});
$("#share2").focusout(function() {
  var share2 = $("#share2").val();
  var answer = 100 - share2;
  $("#share1").val(answer);
});

label {
  display: block;
}
.block {
  background-color: #eee;
  padding: 15px;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h6>You can choose a maximum of 2 users</h6>
<div class="block">
  <label class="checkbox"> Add User
    <input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
  </label>
  <div class="form-group">
    <input type="number" pattern="[0-9]*" id="share1" class="form-control" placeholder="% share" required>
  </div>
</div>
<div class="block">
  <label class="checkbox"> Add User
    <input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
  </label>
  <div class="form-group">
    <input type="number" pattern="[0-9]*" id="share2" class="form-control" placeholder="% share" required>
  </div>
</div>
<div class="block">
  <label class="checkbox"> Add User
    <input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
  </label>
  <div class="form-group">
    <input type="number" pattern="[0-9]*" id="share3" class="form-control" placeholder="% share" required>
  </div>
</div>
<div class="block">
  <label class="checkbox"> Add User
    <input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
  </label>
  <div class="form-group">
    <input type="number" pattern="[0-9]*" id="share4" class="form-control" placeholder="% share" required>
  </div>
</div>

Answer 1

您有使用focusout的特定原因吗？

您可以在复选框功能内捕获两个“选定”元素的ID。或者更确切地说，获得id中的input，位于被选中复选框的div中的下一个parent中：

var active1, active2;
var MAX = 2;
$('input.addnominee').click(function() {
    ($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled',true):$('input.addnominee').not(':checked').attr('disabled',false);
    let checked = $('input.addnominee:checked');
    active1 = $(checked[0]).parent().next('div').children('input').attr('id');
    //Let's assign active2 only if we have multiple selected checkboxes:
    if(checked.length > 1) active2 = $(checked[1]).parent().next('div').children('input').attr('id');
});

这里是click的示例。为简化起见，我在每个数字输入中添加了stepper类，现在我们正在检测类stepper的点击情况：

$(document).on('click','.stepper',function(){
    if($(this).attr('id') == active1){ //Check which one user clicked
        if(active2 != undefined){ //Make the math only if we have another active element
            var share1 = $('#'+active1).val();
            var answer = 100 - share1;
            $('#'+active2).val(answer);
        }
    }else if($(this).attr('id') == active2){
        if(active1 != undefined){
            var share2 = $('#'+active2).val();
            var answer = 100 - share2;
            $('#'+active1).val(answer);
        }
    }
});

提琴：https://jsfiddle.net/xpvt214o/677733/

这当然也可以与focusout一起使用，但是您需要记住，单击步进器不会使输入集中，因此它的功能不是很好。

基于同样的想法，您还可以禁用非“活动”输入。我希望这会有所帮助！

编辑：

也许是具有相同想法的简化版本：

jQuery(document).ready(function($) {
    var MAX = 2;
    $('input.addnominee').click(function() {
        ($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled',true):$('input.addnominee').not(':checked').attr('disabled',false);
    });
    $(document).on('click','.stepper',function(){
        var checked = $('input.addnominee:checked');
        if(checked.length > 1){
            var active1 = $(checked[0]).parent().next('div').children('input');
            var active2 = $(checked[1]).parent().next('div').children('input');
            var share = $(this).val();
            var answer = 100 - share;
            if($(this).attr('id') == $(active1).attr('id')){
                $(active2).val(answer);
            }else if($(this).attr('id') == $(active2).attr('id')){
                $(active1).val(answer);
            }
        }
    });
});

提琴：https://jsfiddle.net/128uzmj3/

限制复选框并在2个活动输入字段之间进行计算

1 个答案: