Listen for changes of checked/disabled in jQuery

Question

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

Answer 1

Regarding the "disabled" change, you may be able to listen to DOMAttrModified events. See this test case for details: http://jsfiddle.net/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..

Answer 2

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.

Answer 3

$('#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')

Answer 4

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

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

Answer 5

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?

Answer 6

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.