document.getElementsByClassName('')[i].addEventListener('click', function() {};) EventListener only executes on the last element of the array?

I am using Js to enable a form field when a checkbox is check otherwise its disable. I am using document.getElementsByClassName which returns an array of checkboxes then i add an addEventListener to each through a for loop. I then check if the box is checked and either removeAttribute('diabled') or setAttribute of a target form field which i get from the href of the checkbox. everything works great except that it only works for the element of the getElementsByClassName array.

html code:

<div class="form-group">
    <form method="POST" action="/admin_accounts/editaccount.php">
        <div class="input-group">
            <div class="input-group-addon input-group-addon-reponsive">
                <label for="memType">Member Type</label>
            </div>
            <select class="form-control" id="memTypeEdit" name="memTypeEdit" disabled>
                <option value="Regular">Regular</option>
                <option value="Ordinary">Ordinary</option>
                <option value="Associate">Associate</option>
                <option value="Executive">Executive</option>
                <option value="Honorary">Honorary</option>
                <option value="Dependant">Dependant</option>
                <option value="Instructor">Instructor</option>
                <option value="Volunteer">Volunteer</option>
            </select>
            <div class="input-group-addon"> 
                <input type="checkbox" class="edit-toggle" href="memTypeEdit"> 
                <label>Edit</label>
            </div>
        </div> 
        <div class="input-group">
            <div class="input-group-addon input-group-addon-reponsive">
                <label for="employ">Employment</label>
            </div>
            <select class="form-control" id="employEdit" name="employEdit" disabled>
                <option value="None"              >None</option>
                <option value="President"         >President</option>
                <option value="Vice President"    >Vice President</option>
                <option value="Treasurer"         >Treasurer</option>
                <option value="Clerk"             >Clerk</option>
                <option value="Instructor"        >Instructor</option>
                <option value="Web Administrator" >Web Administrator</option>
                <option value=""                  >Volunteer</option>
            </select>
            <div class="input-group-addon"> 
                <input type="checkbox" class="edit-toggle" href="employEdit"> 
                <label>Edit</label>  
            </div>
        </div>
        <div class="input-group date" data-provide="datepicker">
            <div class="input-group-addon input-group-addon-reponsive">
                <label for="regDate">Registration Date</label>
            </div>
            <input type="text" id="regDateEdit" name="regDateEdit" class="form-control" disabled>
            <div class="input-group-addon">
                <input type="checkbox" class="edit-toggle" href="regDateEdit"> 
                <label>Edit</label>
            </div>
        </div>
        <div class="input-group date" data-provide="datepicker">
            <div class="input-group-addon input-group-addon-reponsive">
                <label for="expDate">Expiry Date</label>
            </div>
            <input type="text" class="form-control" id="expDateEdit" name="expDateEdit" disabled>
            <div class="input-group-addon">
                <input type="checkbox" class="edit-toggle" href="expDateEdit"> 
                <label>Edit</label>
            </div>
        </div>
        <div class="input-group">
            <div class="input-group-addon input-group-addon-reponsive">
                <label for="admin">Administrator</label>
            </div>
            <select class="form-control" id="adminEdit" name="adminEdit" disabled>
                <option value="0">Is Not Administrator</option>
                <option value="1">Is Administrator</option>                                        
            </select>
            <div class="input-group-addon"> 
                <input type="checkbox" class="edit-toggle" href="adminEdit"> 
                <label>Edit</label>
            </div>                                                        
        </div>
        <div class="text-right">
            <div class="btn-group btn-group-sm" role="group">
                <button type="submit" name="create" class="btn btn-success">Save</button>
                <button type="reset" class="btn btn-info" value="Reset">Reset</button>
            </div> 
        </div>
    </form>
</div>

and the Js:

<script>
    var anchors = document.getElementsByClassName('edit-toggle');
    for (var i = 0, length = anchors.length; i < length; i++) {
        var anchor = anchors[i];
        anchor.addEventListener('click', function() {
            var target = document.getElementById(anchor.getAttribute('href'));
            if (anchor.checked){
                target.removeAttribute('disabled');
            }else{
                target.setAttribute('disabled', 'disabled');
            }
        }, true);
    };
</script>

As it is right now the name="adminEdit" works as intended but non of the others but when I remove class="edit-toggle" from the adminEdit checkbox, the expDateEdit starts working. So it looks like on the last element works. any ideas? thank you.