Javascript JS/jQuery:fire onchange来自禁用/只读输入，不使用按钮_Javascript_Jquery_Html

Javascript JS/jQuery:fire onchange来自禁用/只读输入，不使用按钮

javascript jquery html

Javascript JS/jQuery:fire onchange来自禁用/只读输入，不使用按钮,javascript,jquery,html,Javascript,Jquery,Html,目标是获得全年的总数量用户将数字输入3个不同的文本框（1月、2月、3月），然后总和将显示在禁用的文本框（1月）中。现在我有4个这样的例子，我知道我们每年有4个季度通过使用文本框附带的onchange（）函数，我可以轻松显示每季度的总和现在，我在从4个禁用的文本框中获取总和时遇到了问题，因为我知道我们不能对其使用onchange（），因为它已禁用我搜索过，可能只有在使用按钮时才会得到结果 TLDR：我正在尝试自动显示从四个禁用的文本框到另一个文本框的总和，而无需用户单击任何按钮（就像触发

目标是获得全年的总数量

用户将数字输入3个不同的文本框（1月、2月、3月），然后总和将显示在禁用的文本框（1月）中。现在我有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');
    });
});

$（文档）.ready（函数（）{
$（'input[id$=yearlyTotal]'）.bind（“displaytotal”，function（）{}）；
$（'#qtr1'）。更改（函数（）{
var mos=document.getElementsByClassName（“quantityA”）；
var mosCount=mos.length；
var合计=0；
对于（变量i=0；i


希望有可能，提前谢谢
编辑：添加了用户界面
显示Q1（这与4个QTR相同）

简：
2月：
三月：
问题1：

这是总数量的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>


总数量：
方法1：
基本上，您需要做的是使用jQuery函数以编程方式触发禁用的季度字段的更改事件
因为我不知道你的HTML是如何构造的——这就是为什么总是建议提供示例的原因——我制作了一个演示示例，我做了一些不同的事情，如下所示：


var monthly=$（'.monthly'），
Qrt=$（'季度'）；
每月.on（'change，input'，function（））{
var$th=$（此），
//根据data-q属性的值，我们选择
//具有与数组相同的data-q的所有输入字段，然后
//循环遍历它们，将它们的值相加
q=$th.attr（'data-q'），
qArray=$th.parent（）.children（'input[data-q=“”+q+”），
tempSum=0；
对于（变量i=0，ln=qArray.length；i
每月{宽度：32%；}

总计：
第一个问题：

总数：
第二个问题：

总数：
第三个问题：

总数：
第四个问题：

总和：方法1：
基本上，您需要做的是使用jQuery函数以编程方式触发禁用的季度字段的更改事件
因为我不知道你的HTML是如何构造的——这就是为什么总是建议提供示例的原因——我制作了一个演示示例，我做了一些不同的事情，如下所示：


var monthly=$（'.monthly'），
Qrt=$（'季度'）；
每月.on（'change，input'，function（））{
var$th=$（此），
//根据data-q属性的值，我们选择
//具有与数组相同的data-q的所有输入字段，然后
//循环遍历它们，将它们的值相加
q=$th.attr（'data-q'），
qArray=$th.parent（）.children（'input[data-q=“”+q+”），
tempSum=0；
对于（变量i=0，ln=qArray.length；i
每月{宽度：32%；}

总计：
第一个问题：

总数：
第二个问题：

总数：
第三个问题：

总数：
第四个问题：

总数：
请查找以下代码（查找A季度和B季度的总数），以供参考。请对其他季度使用相同的方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* FINDING THE QUARTER A AND QUARTER B */
function findingQuaterTotal () {
      /* LOADING QUARTER A AND FINDING ITS TOTAL - STARTS */
      var mosQuarterA = document.getElementsByClassName("quarterA"),
          mosCountQuarterA = mosQuarterA.length,
          totalQuarterA = 0,
          i = 0;

      for (i = 0; i < mosCountQuarterA; i++) {
          totalQuarterA = totalQuarterA + parseInt(mosQuarterA[i].value);
      }
      /* ADDING INTO QUATER A DISABLED TEXTBOX */
      $("#quarterA").val(totalQuarterA);
      /* LOADING QUARTER A AND FINDING ITS TOTAL - ENDS */

      /* LOADING QUARTER B AND FINDING ITS TOTAL - STARTS */
      var mosQuarterB = document.getElementsByClassName("quarterB"),
          mosCountQuarterB = mosQuarterB.length,
          totalQuarterB = 0;

      for (i = 0; i < mosCountQuarterB; i++) {
          totalQuarterB = totalQuarterB + parseInt(mosQuarterB[i].value);
      }
      /* ADDING INTO QUARTER B DISABLED TEXTBOX */
      $("#quarterB").val(totalQuarterB);
      /* LOADING QUARTER B AND FINDING ITS TOTAL - ENDS */

      /* TRIGGERING CHANGE EVENT IN THE DISABLED TEXTBOX WHOSE ID STARTS WITH QUARTER.*/
      $("input[id^='quarter']").trigger("change");
};

/* ABOVE CHANGE TRIGGER WILL CALL BELOW EVENTS - STARTS */
$("input[id^='quarter']").change(function () {                        $("#final").val(parseInt($("#quarterA").val())+parseInt($("#quarterB").val()));
});
/* ABOVE CHANGE TRIGGER WILL CALL BELOW EVENTS - ENDS */

/* IF ANY VALUE CHANGES IN MONTH TEXT BOX, FLLWING FUNCTION WILL BE CALLED - STARTS */
$("input[id^='month']").on("change keyup",function () {
  findingQuaterTotal();
});
findingQuaterTotal();
/* IF ANY VALUE CHANGES IN MONTH TEXT BOX, FLLWING FUNCTION WILL BE CALLED - ENDS */  
});
</script>
</head>
<body>
<h2>Quater A</h2>
Jan - <input type="number" id="month1" value="6" class="quarterA"></br>
Feb - <input type="number" id="month2" value="16" class="quarterA"></br>
March - <input type="number" id="month3" value="25" class="quarterA"></br>
Quater A Total - <input type="number" id="quarterA" value="" disabled></br>

<br/><br/>
<h2>Quater B</h2>
April - <input type="number" id="month4" value="6" class="quarterB"></br>
May - <input type="number" id="month5" value="16" class="quarterB"></br>
June - <input type="number" id="month6" value="25" class="quarterB"></br>
Quater B Total - <input type="number" id="quarterB" value="" disabled></br>


Quarter A and Quarter B total - <input type="number" id="final" value="" disabled>
</body>
</html>


$（文档）.ready（函数（）{
/*查找A和B季度*/
函数查找四个总数（）{
/*加载季度A并查找其总启动数*/
var mosquartea=document.getElementsByClassName（“quartea”），
mosCountQuarterA=mosQuarterA.长度，
totalQuarterA=0，
i=0；
对于（i=0；i<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* FINDING THE QUARTER A AND QUARTER B */
function findingQuaterTotal () {
      /* LOADING QUARTER A AND FINDING ITS TOTAL - STARTS */
      var mosQuarterA = document.getElementsByClassName("quarterA"),
          mosCountQuarterA = mosQuarterA.length,
          totalQuarterA = 0,
          i = 0;

      for (i = 0; i < mosCountQuarterA; i++) {
          totalQuarterA = totalQuarterA + parseInt(mosQuarterA[i].value);
      }
      /* ADDING INTO QUATER A DISABLED TEXTBOX */
      $("#quarterA").val(totalQuarterA);
      /* LOADING QUARTER A AND FINDING ITS TOTAL - ENDS */

      /* LOADING QUARTER B AND FINDING ITS TOTAL - STARTS */
      var mosQuarterB = document.getElementsByClassName("quarterB"),
          mosCountQuarterB = mosQuarterB.length,
          totalQuarterB = 0;

      for (i = 0; i < mosCountQuarterB; i++) {
          totalQuarterB = totalQuarterB + parseInt(mosQuarterB[i].value);
      }
      /* ADDING INTO QUARTER B DISABLED TEXTBOX */
      $("#quarterB").val(totalQuarterB);
      /* LOADING QUARTER B AND FINDING ITS TOTAL - ENDS */

      /* TRIGGERING CHANGE EVENT IN THE DISABLED TEXTBOX WHOSE ID STARTS WITH QUARTER.*/
      $("input[id^='quarter']").trigger("change");
};

/* ABOVE CHANGE TRIGGER WILL CALL BELOW EVENTS - STARTS */
$("input[id^='quarter']").change(function () {                        $("#final").val(parseInt($("#quarterA").val())+parseInt($("#quarterB").val()));
});
/* ABOVE CHANGE TRIGGER WILL CALL BELOW EVENTS - ENDS */

/* IF ANY VALUE CHANGES IN MONTH TEXT BOX, FLLWING FUNCTION WILL BE CALLED - STARTS */
$("input[id^='month']").on("change keyup",function () {
  findingQuaterTotal();
});
findingQuaterTotal();
/* IF ANY VALUE CHANGES IN MONTH TEXT BOX, FLLWING FUNCTION WILL BE CALLED - ENDS */  
});
</script>
</head>
<body>
<h2>Quater A</h2>
Jan - <input type="number" id="month1" value="6" class="quarterA"></br>
Feb - <input type="number" id="month2" value="16" class="quarterA"></br>
March - <input type="number" id="month3" value="25" class="quarterA"></br>
Quater A Total - <input type="number" id="quarterA" value="" disabled></br>

<br/><br/>
<h2>Quater B</h2>
April - <input type="number" id="month4" value="6" class="quarterB"></br>
May - <input type="number" id="month5" value="16" class="quarterB"></br>
June - <input type="number" id="month6" value="25" class="quarterB"></br>
Quater B Total - <input type="number" id="quarterB" value="" disabled></br>


Quarter A and Quarter B total - <input type="number" id="final" value="" disabled>
</body>
</html>