Javascript to update input checkbox in a Joomla subform

Question

I have a repeatable subform, that has a number of checkboxes that are effected by the selections made in a list field that is also part of the subform.

I added a onchange function the the list field so when it changes it triggers my little watcher function, that looks like this:

// little script to check value and give notice
function watcherFunction(field) {
    // get the ID
    var id = jQuery(field).attr('id');
    // build the target array
    var target = id.split('__');
    // get value
    var value = jQuery(field).val();
    // set notice and do house cleaning
    if (2 == value) {
        // no database
        jQuery.UIkit.notify({message: Joomla.JText._('COM_COMPONENTBUILDER_ONLY_USE_THE_BNONE_DBB_OPTION_IF_YOU_ARE_PLANNING_ON_TARGETING_THIS_FIELD_WITH_JAVASCRIPTCUSTOM_PHP_TO_MOVE_ITS_VALUE_INTO_ANOTHER_FIELD_THAT_DOES_GET_SAVED_TO_THE_DATABASE'), timeout: 10000, status: 'warning', pos: 'top-center'});
        jQuery.UIkit.notify({message: Joomla.JText._('COM_COMPONENTBUILDER_THE_BNONE_DBB_OPTION_WILL_REMOVE_THIS_FIELD_FROM_BEING_SAVED_IN_THE_DATABASE'), timeout: 5000, status: 'primary', pos: 'top-center'});
        // do some house cleaning
        jQuery('#'+target[0]+'__'+target[1]+'__title').prop('checked', true);
        jQuery('#'+target[0]+'__'+target[1]+'__alias').prop('checked', false);
        jQuery('#'+target[0]+'__'+target[1]+'__sort').prop('checked', false);
        jQuery('#'+target[0]+'__'+target[1]+'__search').prop('checked', false);
        jQuery('#'+target[0]+'__'+target[1]+'__filter').prop('checked', false);
        jQuery('#'+target[0]+'__'+target[1]+'__link').prop('checked', false);
    } else if (1 == value) {
        // show in list view
        jQuery.UIkit.notify({message: Joomla.JText._('COM_COMPONENTBUILDER_THE_BSHOW_IN_LIST_VIEWB_OPTION_WILL_ADD_THIS_FIELD_TO_THE_ADMIN_LIST_VIEW'), timeout: 5000, status: 'primary', pos: 'top-center'});      
    } else {
        // do some house cleaning
        jQuery('#'+target[0]+'__'+target[1]+'__sort').prop('checked', false);
        jQuery('#'+target[0]+'__'+target[1]+'__filter').prop('checked', false);
        jQuery('#'+target[0]+'__'+target[1]+'__link').prop('checked', false);       
    }
}

The idea is that it update a number of checkboxes and send out some notice to the user if the value is 2 and 1.

The notices get send so I know it works, but I am just not able to get the update of the checkboxes to work.

The checkboxes HTML look like this:

<input name="jform[addfields][addfields1][title]" id="jform_addfields__addfields1__title" value="1" class="inputbox" aria-invalid="false" type="checkbox">

ANY HELP WILL BE GREAT!!!

Answer 1

You need to trigger the change event after changing the value of the checkbox. You can do this as follows:

$(checkbox).prop("checked", true).trigger("change");

More about this here:

https://forum.jquery.com/topic/should-chk-prop-checked-true-trigger-change-event