Question

首先，为糟糕的头衔道歉，但老实说，我对jQuery没有足够的了解，不知道什么是不起作用的，而其他同样标题的问题并没有提供可行的解决方案。 HTML代码如下。我的补充，减法在Chrome和Firefox中运行。但不是在Internet Explorer中。

<tr>
        <td width="125"><b>Receiving Quarantine </b></td>
        <td>
        <input type="textbox" name="rcv_quantity" class="tqty" id="totalAmt"  value="<?php echo $row->rcv_quantity; ?>" style="background-color: #f0f0f0;" readonly /> 
        </td>

    </tr>
    <tr>
        <td width="125"><b>Lot Released </b></td>
        <td>
        <input type="text" name="lot_rel" id="lr1" class="lr" onblur="checkTextField(this);" />   
        </td>
    </tr>
    <tr>
        <td width="125"><b>Total Lot Released </b></td>
        <td>
        <input type="text" name="total_lot_rel" id="tlrr" class="tlr" value="<?php echo $row->total_lot_rel; ?>" style="background-color: #f0f0f0;" readonly /> 
        </td>
    </tr>
    <tr>

        <td>
        <input type="hidden" name="sih" id="sih" class="sih" value="<?php echo $row->in_hand_nt_rel; ?>"  />   
        </td>
    </tr>
    <tr>
        <td width="125"><b>Rejected </b></td>
        <td>
        <input type="textbox" name="rejected" id="re" class="lrr"  value="<?php echo $row->rejected; ?> " /> 
        </td>
    </tr>

我使用这个jQuery进行计算。并在我的HTML页面底部写下这个jQuery。

 <script>
    $(document).ready(function(){
        $('.lr,#re').keyup(function () {
            $('.tqty, #totalAmt').val(<?php echo $row->rcv_quantity; ?>);
            $('.tlr,#tlrr').val(<?php echo $row->total_lot_rel; ?>);
            $('.sih,#sih').val(<?php echo $row->in_hand_nt_rel; ?>);
            // Loop through all inputs and re-calculate the total
            var total = parseFloat(totalAmt.value);
            var total_lr = parseFloat(tlrr.value);
            var total_sih = parseFloat(sih.value);
            $('.lr,#re').each(function () {
            // the "+" before the variable makes sure it's a number instead of a string
            // the "or 0" makes it 0 if it's empty, instead of "undefined"
            var number = +$(this).val() || 0;
            total -= +number; // adds up the numbers
            decimal = parseFloat(total).toFixed(2); 
            // sets the total to 2 decimal places
            });
            //----------------------------
            $('.lr').each(function () {

            var number = +$(this).val() || 0;
            total_lr += +number;
            total_sih += +number;

            decimal1 = parseFloat(total_lr).toFixed(2); 
            decimal2 = parseFloat(total_sih).toFixed(2);
            // sets the total to 2 decimal places
            });
            //--------------------------------
            // Update the total
            $('#totalAmt').val(decimal);
            $('#tlrr').val(decimal1);
            $('#sih').val(decimal2);

        });
    });
</script>

Answer 1

如果你正在使用jQuery，你应该考虑使用它。

问题在于，您传递给getElementsByClassName的内容不是类名，而是类选择器。如果您使用该功能，则不希望.出现在那里。 e.g：

var cells = document.getElementsByClassName('lr');
// No . here --------------------------------^

如果我们修复各种拼写错误，那就可以了。

$(document).ready(function() {

  var cells = document.getElementsByClassName('lr');
  for (var i = 0; i < cells.length; i++) {
    if ($(cells[i]).val() > 0)
      cells[i].disabled = true;
  }
});

<table>
  <tbody>
    <tr>
      <td width="125"><b>Lot Released-1 </b>
      </td>
      <td>
        <input type="text" name="lot_rel1" id="lr1" class="lr" value="400" />
      </td>
    </tr>

    <tr>
      <td width="125"><b>Lot Released-2 </b>
      </td>
      <td>
        <input type="text" name="lot_rel2" id="lr2" class="lr" value="" />
      </td>
    </tr>

    <tr>
      <td width="125"><b>Lot Released-3 </b>
      </td>
      <td>
        <input type="text" name="lot_rel3" id="lr3" class="lr" value="" />
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

但是，如果你正在使用jQuery，那么让我们使用jQuery：

$(document).ready(function() {
  $(".lr").each(function() {
    if (this.value > 0) {   // <=== Note! There's an implied type coercion here
      this.disabled = true
    }
  });
});

$(document).ready(function() {
  $(".lr").each(function() {
    if (this.value > 0) {   // <=== Note! There's an implied type coercion here
      this.disabled = true
    }
  });
});

<table>
  <tbody>
    <tr>
      <td width="125"><b>Lot Released-1 </b>
      </td>
      <td>
        <input type="text" name="lot_rel1" id="lr1" class="lr" value="400" />
      </td>
    </tr>

    <tr>
      <td width="125"><b>Lot Released-2 </b>
      </td>
      <td>
        <input type="text" name="lot_rel2" id="lr2" class="lr" value="" />
      </td>
    </tr>

    <tr>
      <td width="125"><b>Lot Released-3 </b>
      </td>
      <td>
        <input type="text" name="lot_rel3" id="lr3" class="lr" value="" />
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

此外，它是type="text"，而不是type="textbox"。我也在上面做了这个改变。

Answer 2

$(document).ready(function () {
    $(.lr).each(function(){
       if($(this).val() > 0)
           this.disabled = true;
    });
)};

考虑使用它，因为你似乎在使用jQuery，因为你在if语句中添加了$。

此外，document.getElementByClassName('.lr')因为您添加了.而不正确，因为您已经在查找类名，您不需要添加.，否则你实际上是在编写一个选择器而不是一个类名。

Answer 3

我认为您正在寻找prop。尝试在开发者控制台中输入此内容。

$("#lr1").prop("disabled", true);

您会看到这正确地禁用了它。所以这将是你正确的jQuery，包括类型检查和所有这些善良。

$(document).ready(function () {
    $('.lr').each(function(){
        if (isNaN(parseFloat($(this).val()))) {
            return;
        }
        if (parseFloat($(this).val()) > 0) {
            $(this).prop("disabled", true);
        }
    });
});

jQuery Keyup功能适用于Chrome和Firefox，但不适用于IE

3 个答案: