How to add attributes to added inputs with JS

Question

I need every checkbox of class 'bad' that will be added to the DOM to get the 'disabled' attribute. External code adds the checkboxes so I can't add the disabled attribute when the checkboxes get inserted to the DOM myself.

How can I do that?

Updated: I don't know when those checkboxes will be added. the scenario is quite complicated.

@gdoron: I've updated my code, getElementsByClassName() wasn't supported by IE < 9. — Czarek Tomczak, Nov 15 '11 at 13:31

score 3 · Accepted Answer · edited May 23 '17 at 12:03

****Updated code**** - see note at the bottom.

DOMNodeInserted event that is suggested here is not cross browser, it is not available in ie < 9, and even in ie 9 it is buggy.

A simple cross browser solution would be to set an interval that checks every 100ms, whether all checkbox elements by class name "bad" are disabled:

function CheckBadCheckboxes()
{
    var elems = document.getElementsByTagName("input");
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].type == "checkbox" && /\b(bad)\b/i.test(elems[i].className) && !elems[i].disabled) {
            elems[i].disabled = true;
        }
    }
}
window.setInterval(CheckBadCheckboxes, 100);

This code does not require you to use jQuery.

There is also another argument agains DOMNodeInserted, it is deprecated and degrades performance of a web page. PetersenDidIt explains it in a comment here:

DOMNodeInserted equivalent in IE?

@Anurag Note: The MutationEvent interface was introduced in DOM Level 2 Events, but has not yet been completely and interoperably implemented across user agents. In addition, there have been critiques that the interface, as designed, introduces a performance and implementation challenge. A new specification is under development with the aim of addressing the use cases that mutation events solves, but in more performant manner. Thus, this specification describes mutation events for completeness, but deprecates the use of both the MutationEvent interface and the MutationNameEvent interface.

Buggy behavior of DOMNodeInserted:

http://help.dottoro.com/ljmcxjla.php

Note that the DOMNodeInserted event is buggy in Internet Explorer 9, it is not fired when a node is inserted for the first time. See the examples below for details.

UPDATE.

I've updated my code, earlier I've used getElementsByClassName() which is unfortunately not supported by IE < 9, I've replaced it with getElementsByTagName("input").

Manuel van Rijn · Answer 2 · 2011-11-15T14:53:38.867

1

here is an example:

$(document).bind("DOMNodeInserted", function(e) {
    var elm = $("input.bad", $(e.target));
    if(elm)
        elm.prop("disabled", "disabled");
});

note: .prop is since jQuery 1.6. use attr() if you're using a older version

edited Nov 15 '11 at 14:53

answered Nov 15 '11 at 11:59

Manuel van Rijn

10,170
1
29
52

1

here's an update. didn't know you had a div arround it http://jsfiddle.net/manuel/yczjr/6/ – Manuel van Rijn Nov 15 '11 at 12:15
Cool! what does the "$(e.target)" do? – gdoron Nov 15 '11 at 12:18
Just a note: This event is **[deprecated](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted)**, just like all Mutation Events. – kapa Nov 15 '11 at 12:22
give's the context where to search in. so we look for `input.bad` within the e.target (
) – Manuel van Rijn Nov 15 '11 at 12:23

Tom Hubbard · Answer 3 · 2011-11-15T12:07:47.363

1

Do you know what "handler" will be doing the additions of the checkboxes?

If so you may be able to capture that and put a "middle" function (e.g.)

var MyTempFunct = OldHandler;

function MyNewFunct(){
    MyTempFunct();
    AddDisableds();
}

OldHandler = MyNewFunct;

There may be some closure problems with this idea though.

edited Nov 15 '11 at 12:07

answered Nov 15 '11 at 12:01

Tom Hubbard

15,820
14
59
86

score 1 · Answer 4 · answered Nov 15 '11 at 12:13

1

You can use this plugin: http://docs.jquery.com/Plugins/livequery

To solve the problem. It will call a function when a node is added and removed. Something like:

$(".bad").livequery(function(){
    $(this).attr("disabled", "disabled");
}, $.noop);

answered Nov 15 '11 at 12:13

Niels

48,601
4
62
81

Thanks! but I would prefer not to add additional plugins to my project as much as I can. Is there isn't a "classic" JQuery way to do it? – gdoron Nov 15 '11 at 12:15

score 0 · Answer 5 · edited Nov 15 '11 at 11:56

0

$(".bad").attr("disabled","disabled");

edited Nov 15 '11 at 11:56

Greg B

14,597
18
87
141

answered Nov 15 '11 at 11:53

Rohan

1,705
7
17
38

thanks for the answer. But it's not so simple... I don't know when those checkboxes being added. the scenario is quite complicated. – gdoron Nov 15 '11 at 11:55

How to add attributes to added inputs with JS

5 Answers5