启用/禁用许多具有不同 id 的单选按钮

Question

到目前为止，我已经构建了一个带有几个单选按钮和一个密码字段的表单。 现在，我想在单击相应的单选按钮后立即激活密码字段。 到目前为止，如果所有密码字段的 id 都不相同，这将起作用。

这是我目前的代码：

<form action="#" th:action="@{/passwordaenderung}" th:object="${UserCreationDto}" method="post" onsubmit="return checkPassword()">
   <fieldset>
      <table>
         <thead>
            <tr>
               <th>Username</th>
               <th>Password</th>
            </tr>
         </thead>
         <tbody>
            <tr th:each="user, itemStat : *{users}">
               <td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" id="raidoButtonCheck" onclick="document.getElementById('pwd').removeAttribute('disabled')" /></td>
               <td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
               <td><input type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" id="pwd" disabled/></td>
            </tr>
         </tbody>
      </table>
      <input type="submit" id="submitButton" th:value="Speichern">
   </fieldset>
</form>

那么，它在我的浏览器中看起来像吗：

解释/编译的代码看起来像这样：

我希望有人能告诉我如何为所有密码字段获取不同的 ID，以便通过

document.getElementById('pwd').removeAttribute('disabled')

Answer 1

您可以使用th:id 动态设置每个输入的ID。您可以使用迭代器索引，以便它可以是唯一的。以下代码应该可以工作。

<tr th:each="user, itemStat : *{users}">
    <td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" class="radioButton" th:onclick="${'document.getElementById('''+ itemStat.index +''').removeAttribute(''disabled'')'}" /></td>
    <td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
    <td><input type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" th:id="${itemStat.index}" disabled/></td>
</tr>

如果您想禁用所有其他输入，当您单击其中一个时，我建议您为所有输入添加一个类并更改您的点击功能。

JS

<script>
    function inputClick(id) {
        var passwordFields = document.getElementsByClassName("passwordField");
        for(i = 0; i < passwordFields.length; i++) {
            passwordFields[i].disabled = true;
        }
        document.getElementById(id).removeAttribute('disabled');
    }
</script>

HTML

<tr th:each="user, itemStat : *{users}">
    <td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" class="radioButton" th:onclick="${'inputClick('''+ itemStat.index +''')'}" /></td>
    <td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
    <td><input class="passwordField" type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" th:id="${itemStat.index}" disabled/></td>
</tr>

js 可以添加到头部或身体的某处，也可以添加到外部 js 文件中。