即使數據值不正確，也無法顯示正確的按鈕

Question

• 我有一個界面，檢查特定生產批次的質量屬性。
• 我能夠從后端獲取數據並在前端顯示。
• 但無法使用拒絕和接受提交按鈕實現我想要的。
• 首先，當我在范圍內輸入一些值時， 值字段輸入文本變為綠色並顯示“發送到完成庫存”按鈕。 而我想要的是顯示“拒絕批次”按鈕。 因為尚未填寫其他文本輸入。

• 其次，當我在值文本輸入字段中輸入一些非范圍值時，它顯示“拒絕批處理”按鈕。 這就是我想要的。

• 問題是，我無法弄清楚，當任何一個值文本輸入字段變為紅色時，如何顯示“拒絕批處理按鈕”。

• 當所有值文本輸入字段變為綠色時 ，我想顯示“發送到完成庫存”按鈕。
• 問題是，當我更改特定值文本輸入字段時 ，相應地拒絕或發送到庫存按鈕顯示。
• 例如： - 首先輸入不正確的值，它應顯示“拒絕批次”按鈕，這就是我想要的。
• 其次，我輸入正確的值，它顯示“發送到庫存”按鈕，這不是我想要的，並應顯示“拒絕批次”按鈕。
• 如果有任何紅色輸入文本字段，我想顯示“拒絕批處理”按鈕，而不是“發送到庫存”按鈕，所以這是我遇到如何實現這一點。
  希望這是有道理的

---

這是我的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>