如何在选项选择时将文本区域标记为“必需”

Question

我正在编写一个 .html 页面，用于执行系统检查并验证该系统各个方面的功能。 .html 页面包含一个封装在表单中的表格，该表格的每一行是验证系统方面的一个步骤（例如，步骤 1：做某事），而每一列是该结帐过程的不同标准（例如，步骤 #、步骤说明、预期结果、实际结果和评论）。

对于实际结果列，我可以选择空白（不完整）、通过、失败和不适用。 Comments 列有一个禁用的 textarea 框，其中有一个占位符，上面写着“No Comments”。

HTML：

<form method="post" action="">
    <table>
        <thead>
            <tr>
                <th align="center"><strong>Step</strong></th>
                <th align="left"><strong>Instruction</strong></th>
                <th align="left"><strong>Expected Result</strong></th>
                <th align="left"><strong>Actual Result</strong></th>
                <th align="left"><strong>Comments</strong></th>
            </tr>
        </thead>
        <tr>
            <td align="center" valign="top">1.</td>
            <td align="left" valign="top">Do something.</td>
            <td align="left" valign="top">Something happens.</td>
            <td align="center" valign="top"><select id="testResult" name="testResult">
                    <option value="Incomplete" selected></option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
                    <option value="N/A">N/A</option>
                </select>
            </td>
            <td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
        </tr>
        <tr>
            <td align="center" valign="top">2.</td>
            <td align="left" valign="top">Do something else.</td>
            <td align="left" valign="top">Something else happens.</td>
            <td align="center" valign="top"><select id="testResult" name="testResult">
                    <option value="Incomplete" selected></option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
                    <option value="N/A">N/A</option>
                </select>
            </td>
            <td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
        </tr>
        </tbody>
    </table>

    <input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>

通过 JavaScript，我想将“评论”列中的文本区域框设置为启用，并且如果在前面的“实际结果”列中选择“失败”或“不适用”，则该框是必需的。

我将如何扩展它以支持多行，每行都有一个选择和具有相似功能的文本区域？

Answer 1

此代码可以帮助您。

let trc = document.getElementsByClassName("testResultClass")
for(let i = 0;i < trc.length;i++) {
  let elem = trc[i]
  elem.onchange = (e) => {
    let txbx = elem.parentElement.parentElement.getElementsByClassName("testResultBoxClass")[0]
    if(elem.value == "Fail" || elem.value == "N/A"){
      txbx.disabled = false
      txbx.required = true
    } else
      txbx.disabled = true
      txbx.required = false
  }
}

<form method="post" action="">
    <table>
        <thead>
            <tr>
                <th align="center"><strong>Step</strong></th>
                <th align="left"><strong>Instruction</strong></th>
                <th align="left"><strong>Expected Result</strong></th>
                <th align="left"><strong>Actual Result</strong></th>
                <th align="left"><strong>Comments</strong></th>
            </tr>
        </thead>
        <tr>
            <td align="center" valign="top">1.</td>
            <td align="left" valign="top">Do something.</td>
            <td align="left" valign="top">Something happens.</td>
            <td align="center" valign="top"><select id="testResult" name="testResult" class="testResultClass">
                    <option value="Incomplete" selected></option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
                    <option value="N/A">N/A</option>
                </select>
            </td>
            <td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" class="testResultBoxClass" placeholder="No comments" disabled="disabled"></textarea></td>
        </tr>
        <tr>
            <td align="center" valign="top">2.</td>
            <td align="left" valign="top">Do something else.</td>
            <td align="left" valign="top">Something else happens.</td>
            <td align="center" valign="top"><select id="testResult" name="testResult" class="testResultClass">
                    <option value="Incomplete" selected></option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
                    <option value="N/A">N/A</option>
                </select>
            </td>
            <td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" class="testResultBoxClass" placeholder="No comments" disabled="disabled"></textarea></td>
        </tr>
        </tbody>
    </table>

    <input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>

Answer 2

您可以按照此代码进行操作。

function checkComment()
{
  var select = document.getElementById('testResult').options[document.getElementById('testResult').selectedIndex].text
  var comment = document.getElementById("userComments");
  if(select === "Fail" || select === "N/A") 
  {
    comment.disabled = false;
  } else {
      comment.value = "";
      comment.disabled = true;
  }
}

<form method="post" action="">
<table>
<thead>
    <tr>
        <th align="center"><strong>Step</strong></th>
        <th align="left"><strong>Instruction</strong></th>
        <th align="left"><strong>Expected Result</strong></th>
        <th align="left"><strong>Actual Result</strong></th>
        <th align="left"><strong>Comments</strong></th>
    </tr>
</thead>
    <tr>
        <td align="center" valign="top">1.</td>
        <td align="left" valign="top">Do something.</td>
        <td align="left" valign="top">Something happens.</td>
        <td align="center" valign="top">
        <select id="testResult" name="testResult" onChange="checkComment()">
            <option value="Incomplete" selected></option>
            <option value="Pass">Pass</option>
            <option value="Fail">Fail</option>
            <option value="N/A">N/A</option>
        </select>
        </td>
        <td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
    </tr>
</tbody>
</table>

<input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>