Listen For Changes Of Checked/disabled In Jquery

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 the

Solution 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..

Solution 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.

Solution 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')

Solution 4:

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

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

Solution 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?