Question

到目前为止，我已经建立了一个带有一些radioButtons和一个密码字段的表单。现在，我想在单击相应的radioButton时立即激活密码字段。到目前为止，如果所有密码字段的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>

如果要禁用所有其他输入，请在其中之一上单击，然后建议为所有输入添加一个类，并更改对功能的单击。

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的单选按钮

1 个答案: