javascript - JS/jQuery : fire onchange from a disabled/readonly input without using button

Question

目标是获得全年的总数量。

用户将在 3 个不同的文本框(一月、二月、三月)中输入数字，然后总和将显示在禁用的文本框(第一季度)中。 现在我有 4 个这样的实例，知道我们每年有 4 个季度。

通过使用附加到文本框的 onchange() 函数，我可以轻松显示每季度的总和。

现在我在从 4 个禁用的文本框中获取总和时遇到问题，因为我知道我们无法在其上使用 onchange() 因为它已被禁用。

我进行了搜索，并且可能仅在使用按钮时才获得结果。

TLDR:我试图将四个禁用文本框的总和自动显示到另一个文本框，而无需用户单击任何按钮(就像触发 onchange 事件一样)

我尝试过这个，其中我尝试显示第一季度的值到总计，但不起作用:

$(document).ready(function() {
    $('input[id$=yearlyTotal]').bind("displaytotal", function() {});
    $('#qtr1').change(function() {
        var mos = document.getElementsByClassName("quantityA");
        var mosCount = mos.length;
        var total = 0;

        for (var i = 0; i < mosCount; i++) {
            total = total + parseInt(mos[i].value);
        }
        $('input[id$=yearlyTotal]').val(total).trigger('displaytotal');
    });
});

希望这是可能的，提前致谢

编辑:添加用户界面

显示第一季度(与 4 个季度相同)

   <div class="form-group col-md-6">
           <label class="col-sm-1 control-label">Jan:</label>
           <div class="col-sm-2 small">
           <input type="number" min="0" id="col3" class="form-control input-sm monthly" data-q="q1" name="January"  />
           </div>
           <label class="col-sm-1 control-label">Feb:</label>
           <div class="col-sm-2 small">
           <input type="number" min="0" id="col4" class="form-control input-sm monthly" data-q="q1" name="February" />
           </div>
           <label class="col-sm-1 control-label">Mar:</label>
           <div class="col-sm-2 small">
           <input type="number" min="0" id="col5" class="form-control input-sm monthly" data-q="q1" name="March" />
           </div>
           <label class="col-sm-1 control-label">Q1:</label>
           <div class="col-sm-2 small">
           <input type="text" min="0" id="q1" class="form-control input-sm quarter" name="q1"  style="background-color: #b3dcf5;"  disabled />
           </div>
</div>

这是总数量的 div

<div class="col-md-6">
       <label class="col-sm-3 control-label" id="">Total Quantity:</label>
       <div class="col-sm-3 small">
       <input type="text" id="final" class="form-control input-sm" name="TotalQuantity" value="0" disabled />
       </div>
</div>

Answer 1

方法一:

基本上，您需要做的是使用 jQuery .trigger() 以编程方式触发禁用季度字段的 change 事件。功能。

因为我不知道您的 HTML 是如何构造的 -这就是为什么总是建议提供 MCVE示例-我制作了一个演示示例，并且做了不同的事情，如下所示:

jsFiddle 1

var monthly = $('.monthly'),
  Qrt = $('.quarter');

monthly.on('change, input', function() {
  var $th = $(this),
    // depending on the value of the data-q attribute, we pick
    // all input fields with the same data-q as an array, then
    //loop through them adding their values up
    q = $th.attr('data-q'),
    qArray = $th.parent().children('input[data-q="' + q + '"]'),
    tempSum = 0;

  for (var i = 0, ln = qArray.length; i < ln; i++) {
    tempSum += +$(qArray[i]).val();
  }
  
  // we pick the corresponding quarter sum field, again depending
  // on the value of the data-q attritues, and update its value, then
  // we trigger the change event of this quarter sum field.
  $('#' + q).val(tempSum).trigger('change'); // here you trigger it
});

Qrt.on('change', function() {
  var qSum = 0;
  for (var i = 0, ln = Qrt.length; i < ln; i++) {
    qSum += +$(Qrt[i]).val();
  }
  $('#final').val(qSum);
});

.monthly { width: 32%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h3>Grand Total:</h3><input type="text" id="final" disabled><hr>
<h3>1st Q:</h3>
<input type="text" class="monthly" data-q="q1">
<input type="text" class="monthly" data-q="q1">
<input type="text" class="monthly" data-q="q1">
<br>Sum:<input id="q1" type="text" class="quarter" disabled>
<h3>2nd Q:</h3>
<input type="text" class="monthly" data-q="q2">
<input type="text" class="monthly" data-q="q2">
<input type="text" class="monthly" data-q="q2">
<br>Sum:<input id="q2" type="text" class="quarter" disabled>
<h3>3rd Q:</h3>
<input type="text" class="monthly" data-q="q3">
<input type="text" class="monthly" data-q="q3">
<input type="text" class="monthly" data-q="q3">
<br>Sum:<input id="q3" type="text" class="quarter" disabled>
<h3>4th Q:</h3>
<input type="text" class="monthly" data-q="q4">
<input type="text" class="monthly q-4th" data-q="q4">
<input type="text" class="monthly q-4th" data-q="q4">
<br>Sum:<input id="q4" type="text" class="quarter" disabled>

<小时/>

方法2:

由于您对任何.monthly字段所做的任何更改都会更改季度总和的相应值，因此也会影响年度总和的值，您不需要捕获禁用的季和字段的 change 事件，只需循环遍历它们的值并更新年度字段的值，所有操作都应该在内部完成.monthly 字段的 on('change') 事件，如下所示:

jsFiddle 2

jQuery

var monthly = $('.monthly'),
    Qrt = $('.quarter');

monthly.on('change, input', function() {
  var $th = $(this),
    q = $th.attr('data-q'),
    qArray = $th.parent().children('input[data-q="' +q+ '"]'),
    tempSum = 0,
    qSum = 0;

  for (var i = 0, ln = qArray.length; i < ln; i++) {
    tempSum += +$(qArray[i]).val();
  }
  $('#' + q).val(tempSum);
  
  // code below
  for (var i = 0, ln = Qrt.length; i < ln; i++) {
    qSum += +$(Qrt[i]).val();
  }
  $('#final').val(qSum);
});

<小时/>

更新:

对于 OP 中更新的 HTML，请将 qArray 行替换为以下行:

$th.parents('.form-group').find('input[data-q="' + q + '"]')`,

注意 parents()与“s”字母不同，与之前在 DOM 中向上移动一级的 parent() 不同，它会“搜索 DOM 树中这些元素的祖先并构造一个新的 jQuery 对象来自从直接父级开始排序的匹配元素。”，因此它向上移动，直到我们到达 matchng 父级，这里是 .form-group。

然后我们使用 find() 而不是 children() .

jsFiddle 3