启用/禁用许多具有不同 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，以便通过

启用正确的 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>

如果你想禁用所有其他输入，当你点击其中之一时，我建议向所有输入添加一个 class 并更改你的点击功能。

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 文件中。

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

Enable / Disable many radioButtons having different ids

html

javascript

passwords

thymeleaf