Включить / отключить много радио кнопок, имеющих разные идентификаторы

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>

Итак, как это выглядит в моем браузере:

И так интерпретированный / скомпилированный код выглядит так:

Надеюсь, кто-нибудь подскажет, пожалуйста, как мне получить разные идентификаторы для всех полей пароля, чтобы правильный номер был включен через

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

Answer 1

Вы можете динамически устанавливать идентификаторы каждого входа, используя th: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 файл.