Checkbox and onchange method usage

Question

I have a table with some rows that have checkboxes on the first column where if user clicks, it calls some javascript methods that disable the other fields of the respective rows.

The structure of these inputs is this:

<input type="checkbox" name="ans_R2057321_Q2060122" id="ans_R2057321_Q2060122" value="2002241" onclick="matrix.disableFields(this, 'R2057321');recalculateRowFormulas('2057321'); alignTDs();" />

I implemented a link where when user clicks on it, it has to select all these checkboxes, so I did it this way:

function noQuoteAllRowsOfCurrPage(){
    jQuery("input:checkbox[id^=ans_R]").each(function(i,e) {
        jQuery(e).prop('checked', true);
    });
}

This simply iterates in each checkbox on the screen whose id starts with ans_R, and then check the CB state to true. It does works, but the problem is that the javascript functions called on the onclick property of the input checkboxes aren't running. First thing I did was changing from onclick to onchange, which should be the correct way to do that, since the state of checkbox is changing, but somehow it doesn't work... any ideas what of what can I do?

Answer 1

I found what I was missing and since I saw several people with the same problem, I think my solution can be helpful for others..

I just added a trigger for 'change'.

function noQuoteAllRowsOfCurrPage(){
    jQuery("input:checkbox[id^=ans_R]").each(function(i,e) {
        jQuery(e).click();
        jQuery(e).prop('checked', true).trigger('change');
    });
}

Answer 2

JQuery's .prop() function does not trigger the change event. You either can

1 - Trigger the event manually

jQuery(e).prop('checked', true).trigger('change');

2 - Use the .click() function that will check the input, and trigger the event as well..

jQuery(e).click();