Question

so I’m writing an interface for updating and displaying a database table, and each row displayed on the client-side (using DataTables) has an “Edit” and “Delete” button. Every time you click on a single row’s Edit, all the Edit and Delete buttons in other rows are disabled. This is the Javascript code I use to do it:

        var editButtons = document.getElementsByName("EditRow");
        var deleteButtons = document.getElementsByName("DeleteRow");

        for (i in editButtons) {
            editButtons[i].disabled = true;
        }

        for (i in deleteButtons) {
            deleteButtons[i].disabled = true;
        }

This works fine with Chrome and Firefox, but when I try it in IE9, it doesn’t disable anything. I’ve tried many things to solve this, including grabbing the DOM objects using jQuery, but nothing has worked. Any help is appreciated.

Answer 1

document.getElementsByName returns a node list, which is Array-like. You should treat it as such:

var elements = document.getElementsByName('something'),
    len = elements.length; 
for (var i = 0; i < len; i++) {
    elements[i].disabled = true;
}