如何在选项选择时将文本区域标记为 "Required"

Question

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

对于“实际结果”列，我选择了空白（不完整）、通过、失败和 N/A。 Comments 列有一个禁用的文本框，其占位符为 "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，我想将 "Comments" 列中的文本框设置为启用，如果在 "Fail" 或 "N/A" 中选择前面的 "Actual Results" 列。

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

Answer 1

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

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>

Answer 2

这段代码可以帮到你。

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>

如何在选项选择时将文本区域标记为 "Required"

How to tag a textarea as "Required" on option selection

javascript

html

textarea

selection

required