即使数据值不正确也无法显示正确的按钮

Question

• 我有一个界面，可以检查特定生产批次的质量属性。
• 我能够从后端获取数据并在前端显示。
• 但无法通过拒绝和接受提交按钮实现我想要的功能。
• 首先，当我输入该范围内的某个值时， value 字段输入文本将变为绿色，并显示“发送至完成库存”按钮。相反，我想要的是显示“拒绝批次”按钮。因为还没有填写其他文本输入。

• 其次，当我在值文本输入字段中输入一些非范围值时，它显示“拒绝批次”按钮。这就是我想要的。

• 问题是，我无法弄清楚，当值文本输入字段中的任何一个变为红色时，如何显示“拒绝批处理按钮” 。

• 当所有值文本输入字段变为绿色时，我想显示“发送以完成库存”按钮。
• 问题是，当我更改特定的值文本输入字段时，相应地显示拒绝或送入库存按钮。
• ex：-首先输入不正确的值，它应该显示“拒绝批次”按钮，这是我想要的。
• 第二，我输入正确的值，它显示“发送到库存”按钮，这不是我想要的，并且应该显示“拒绝批次”按钮。
• 如果有红色输入文本字段，我想显示“拒绝批次”按钮，而不是“发送到库存”按钮，所以这是我难以实现的地方。
  希望这很有道理

---

这是我的html标记

<div class="text-center">
  <button type="submit" class="btn btn-success btn-sm nodisp" data-toggle="tooltip" id="acceptbtn">send to finish stock</button>
  <button type="submit" class="btn btn-danger btn-sm nodisp" data-toggle="tooltip" id="rejectbtn">reject the batch</button>
</div>

---

这是我的php代码，显示表单界面

<?php
      $pro_item_id = $_GET['proitem'];
      include_once('../backend/ProductQCAttribute.php');
      $pro_qc_attr = new ProductQCAttribute();
      $all_qc_attr = $pro_qc_attr->get_all_qc_attributes_by_product_item_id($pro_item_id);
      $row = 0;
      foreach ($all_qc_attr as $single_qc_attrb) {
             echo ("<tr>" .
                   "<td>" . "<input type='hidden' name='qc_attrb_id[]' id='qc_attrib_id_$row' class='form-control' value='$single_qc_attrb->pro_qc_attr_id' >". $single_qc_attrb->pro_qc_attr_name ."</td>" .
                    "<td>" . "<input type='text' name='qc_value[]' id='qc_value_$row'  class='form-control check-range' onchange='checkValue($row,$single_qc_attrb->pro_qc_attr_low_margin,$single_qc_attrb->pro_qc_attr_high_margin)' >" ."</td>" .
                     "<td>" . "<input type='text' name='low_margin[]' id='low_margin_$row' class='form-control' value='$single_qc_attrb->pro_qc_attr_low_margin' readonly >"  ."</td>" .
                     "<td>" . "<input type='text' name='high_margin[]' id='high_margin_$row' class='form-control' value='$single_qc_attrb->pro_qc_attr_high_margin' readonly >" ."</td>".
                     "</tr>");
          $row++;
        }

?>

---

这是相应的JavaScript代码，用于检查这些输入值并显示“拒绝批次”或“发送至库存”按钮

    // change the color of input fields based on input user provide
    // function working correclty
    function checkValue(row,lowMargin,highMargin) {
        if($("#qc_value_"+row).val() >= lowMargin && $("#qc_value_"+row).val() <= highMargin) {
            $("#qc_value_"+row).addClass('green-check');
            $("#qc_value_"+row).removeClass('red-reject'); // red-reject class I defined in the css file..its ok
        } else {
            $("#qc_value_"+row).addClass('red-reject');
            $("#qc_value_"+row).removeClass('green-check');
        }

        check_green(row); // calling to this might be in the wrong place, I tried different places but didn't work it out.
    }


    // check weather all input fields are green, then show the accept button
    // function working correctly
    function check_green(row) {
        if($("#qc_value_"+row).hasClass('green-check')) { // green-check class I defined in the css file..its ok
            $("#status").val('pass');
            $("#acceptbtn").removeClass('nodisp'); // nodisp class I defined in the css file..its ok
            $("#rejectbtn").addClass('nodisp');
        } else {
            $("#status").val('fail');
            $("#rejectbtn").removeClass('nodisp');
            $("#acceptbtn").addClass('nodisp');
        }

    }

---

我尝试过并且无法弄清楚我在这里做错了什么或代码中缺少什么..如果有人可以让我深入了解如何解决这个问题，将不胜感激。

Answer 1

您可以检查表单中的任何控件是否具有red-reject类，并相应显示按钮。

jQuery集合具有一个length属性供您使用。

我对标记进行了一些更改，以使用事件侦听器代替onChange，它将标记与逻辑分离，从而更易于维护。

// Execute whenever a user input changes
$('.check-range').on('change', function() {
  // Cache the jquery object
  $this = $(this);

  currentValue = parseFloat($this.val());
  // Find corresponding range values
  lowMargin = parseFloat($this.closest('tr').find('[id^="low_margin"]').val());
  highMargin = parseFloat($this.closest('tr').find('[id^="high_margin"]').val());

  // Check bounds and add classes
  if ((currentValue >= lowMargin) && (currentValue <= highMargin)) {
    $this.addClass('green-check');
    $this.removeClass('red-reject');
  } else {
    $this.addClass('red-reject');
    $this.removeClass('green-check');
  }

  // Update button status
  // 0 is falsey, any other value is truthy
  if ($('.check-range.red-reject').length) {
    // There are invalid parameters
    $("#rejectbtn").removeClass('nodisp');
    $("#acceptbtn").addClass('nodisp');
  } else {
    $("#acceptbtn").removeClass('nodisp');
    $("#rejectbtn").addClass('nodisp');
  }
})

.green-check {
  background-color: green;
}

.red-reject {
  background-color: red;
}

.nodisp {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type='hidden' name='qc_attrb_id[]' id='qc_attrib_id_1' class='form-control' value='2'> Attr name </td>
    <td><input type='text' name='qc_value[]' id='qc_value_1' class='form-control check-range'></td>
    <td><input type='text' name='low_margin[]' id='low_margin_1' class='form-control' value='15' readonly></td>
    <td><input type='text' name='high_margin[]' id='high_margin_1' class='form-control' value='20' readonly></td>
  </tr>
  <tr>
    <td><input type='hidden' name='qc_attrb_id[]' id='qc_attrib_id_2' class='form-control' value='2'> Attr name </td>
    <td><input type='text' name='qc_value[]' id='qc_value_2' class='form-control check-range'></td>
    <td><input type='text' name='low_margin[]' id='low_margin_2' class='form-control' value='5' readonly></td>
    <td><input type='text' name='high_margin[]' id='high_margin_2' class='form-control' value='25' readonly></td>
  </tr>
</table>

<div class="text-center">
  <button type="submit" class="btn btn-success btn-sm nodisp" data-toggle="tooltip" id="acceptbtn">send to finish stock</button>
  <button type="submit" class="btn btn-danger btn-sm nodisp" data-toggle="tooltip" id="rejectbtn">reject the batch</button>
</div>