Question

The documentation says to use:

$("input[type='checkbox']").bind( "change", function(event, ui) {

But I want to know if that’s still true over

$("input:checkbox]").on('change', function(event, ui) {

Also, I’d like to stop the check from appearing and then programmatically have it appear when the callback is run.

The solution probably includes the refresh method.

Answer 1

You want to use

$(this).removeAttr('checked').checkboxradio('refresh');

to turn the checkbox off and then

$(this).prop('checked',true).checkboxradio('refresh');

to turn it back on.

$('input:checkbox').on('change', function(myEvent, ui) {
    var settings = {};
    settings.data = {};
    settings.data.PersonID = $(this).val();
    settings.data.EvntID = $('#EvntID').val();

    if ($(this).is(':checked')) {
        $(this).removeAttr('checked').checkboxradio('refresh');
        settings.data.method = 'check';
        settings.context = this;
        myXHR = $(this).myAjax('Evnt.cfc',settings);
        myXHR.done(function(result) {
            if (!result.MSG) {
                $(this).prop('checked',true).checkboxradio('refresh');
            }
        });
    } else {
        $(this).prop('checked',true).checkboxradio('refresh');
        settings.data.method = 'uncheck';
        myXHR = $(this).myAjax('Evnt.cfc',settings);
        myXHR.done(function(result) {
            if (!result.MSG) {
                $(this).removeAttr('checked').checkboxradio('refresh');
            }
        });
    }
});