I have some object (div, input/checkbox) in an HTML page. The values for their "checked" and "disabled" attributes are set via some JS functions. I want to listen to changes of these attributes, but couldn't find any function or listener to perform that.

How can I add an event listener that listen on changes of "checked" or "disabled" and execute some code (e.g. changing style of checkbox / div) depending on the attributes' status?

Thanks

I have some object (div, input/checkbox) in an HTML page. The values for their "checked" and "disabled" attributes are set via some JS functions. I want to listen to changes of these attributes, but couldn't find any function or listener to perform that.

How can I add an event listener that listen on changes of "checked" or "disabled" and execute some code (e.g. changing style of checkbox / div) depending on the attributes' status?

Thanks

• javascript
• jquery
• jquery-selectors

• 1 For changing style, you might want to simply use the :checked pseudoclass in CSS: jsfiddle/ceEnA. – pimvdb Commented Nov 25, 2011 at 10:09
• I change no CCS styles but add attributes like "disabled" to a div – Konrad Commented Nov 25, 2011 at 10:16
• Not sure what you're after, but "(e.g. changing style of checkbox / div) depending on the attributes' status" can be most easily implemented with CSS. – pimvdb Commented Nov 25, 2011 at 10:18
• 1 To expand on what @pimvdb said, you can also used the :disabled pseudoclass - I've done a (rather crude) update to pimvdb's fiddle: jsfiddle/ceEnA/2 – nnnnnn Commented Nov 25, 2011 at 10:19

6 Answers 6

Regarding the "disabled" change, you may be able to listen to DOMAttrModified events. See this test case for details: http://jsfiddle/4kWbp/1/

Note that not all UAs support DOM mutation events like DOMAttrModified, and in those that do support them, listening to them may cause performance to detoriate.

Setting .checked directly does not trigger "change" events, and doesn't seem to trigger DOMAttrModified either (only tested in Opera though, and this is the sort of under-specified between-the-spec-gaps stuff that might well be very inconsistent across browsers. Perhaps it's an Opera bug.)

The last resort would perhaps be defining getters/setters for those properties. That would be a rather ugly hack though..

You can use the pseudo-selectors for :checked and :disabled and trigger an empty animation which causes an animationstart event. For example:

select > option:checked {
    animation: checked 1ms;
}
select > option:not(:checked) {
    animation: unchecked 1ms;
}
@keyframes checked { from {}; to {}; }
@keyframes unchecked { from {}; to {}; }

and then in javascript you can use:

document.body.querySelector('select').addEventListener('animationstart',
    function (ev) {
        console.dir(ev);
    });

The event has available animationName and target properties which give you enough to work with.

$('#Checkboxid:checked') this will return true if checkbox value is on and false if checkbox value is off. this is jquery selector function :checked can be use to check radio and checkbox values.

syntax is as follows:

$('#checkboxid:checked')

To 'listen' to when a checkbox has been toggled use change():

$('.target').change(function() {
    console.log(this.checked ? 'Checked' : 'Not Checked');
});

Use the :checked to determine the checked radio or checkbox on the page or container.

First of all check this jsfiddle

after this follow this stackoverflow question Jquery get selected checkboxes to write for your desired result.

you can check disabled or not as:

var set=1;
var unset=0;
jQuery( function() {
  $( '.checkAll' ).live('click', function() {
    $( '.cb-element' ).each(function () {
      if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
      if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
    });
    set=unset;
  });
});

Check these links for detail:

Jquery get selected checkboxes

Setting "checked" for a checkbox with jQuery?

I don't have answer to your question, but I could suggest you to try something like Event Bus (in GWT is Event Handler).

For JQuery you can use Events.