JavaScript 函数在表单循环中不起作用

Question

JavaScript work only in first iteration, doesn't affect on the field from second iteration.

forloop Code Sample

 {% for i in userlist %}
    <input id="a" type="email" value="{{i.email}}">
    <input id="b" type="text" value="{{i.date_of_birth}}">
    <input id="c" type="text" value="{{i.mobile}}">
 {% endfor %}

Button for disable editing

<button onclick="disableProfileEditing()" type="button"> Disable </button>

Button for enable editing

<button onclick="enableProfileEditing()"> Edit</button>

JavaScript function

function disableProfileEditing() {
    document.getElementById(a).disabled = true;
    document.getElementById(b).disabled = true;
    document.getElementById(c).disabled = true;
}


function disableProfileEditing() {
    document.getElementById(a).disabled = false;
    document.getElementById(b).disabled = false;
    document.getElementById(c).disabled = false;
}

Answer 1

Ok regardless of how the for loop is made, what it is doing is making many elements with the same I'd, which is a problem. Instead you can give them all a unique class, or data attribute, but class is simpler and more widely supported, then in your function you have to get all elements with that class (or data attribute) and do the hiding etc.

So for the for loop

 {% for i in userlist %}
    <input  class="email" type="email" value="{{i.email}}">
    <input class="dob" type="text" value="{{i.date_of_birth}}">
    <input class="mobile" type="text" value="{{i.mobile}}">
 {% endfor %}

Just changed the IDs to class, so you can have more than one. Now for the first function just get all of each class (and the second one I'll leave for you to figure out)

function disableProfileEditing() {
    Array.apply(0,document.getElementsByClassName("email")).forEach(x=> x.disabled = true);
    Array.apply(0,document.getElementsByClassName("dob")).forEach(x=> x.disabled = true);
    Array.apply(0,document.getElementsByClassName("mobile")).forEach(x=> x.disabled = true);
}

OR you could have just made a surrounding container div with a unique ID then just made the for loop add elements into that, probably would have been simpler if you want to show or hide them all together