How disable checkbox when listbox value changes in tinymce

Question

I'm creating a custom popup in tinyMCE for WordPress, to insert video shortcodes, so I have a list of websites (YouTube, Vimeo, Vine, and others) in a listbox, and a checkbox to let the user decide to add the particle "autoplay".

This is a simplified version of the script (the video section):

{
    text: 'Vídeos',
        onclick: function() {       
            editor.windowManager.open({
                title: 'Vídeo Incorporado',
                body: [
                    {type: 'checkbox',
                    name: 'video_autoplay',
                    label: 'Executar automaticamente?',
                    text: 'Sim',
                    classes: 'checkclass'
                    },

                    {type: 'listbox',   
                    name: 'video_site',
                    label: 'Escolha o site de origem',
                    'values': [
                        {text: 'YouTube', value: 'youtube'},
                        {text: 'Vimeo', value: 'vimeo'},
                        {text: 'Vine', value: 'vine'},
                        ],
                    },

                    {type: 'textbox',
                    name: 'video_id',
                    label: 'ID do vídeo',
                    value: ''
                        },
                    ],
        onsubmit: function( e ) {
        editor.insertContent('[video origem="' + e.data.video_site + '" id="' + e.data.video_id +'" autoplay="'+ e.data.video_autoplay +'"]');
            }
        });
    } 
},

...and this is the window it generates (only difference is the position of checkbox, that i've put at first place after this print:

So I can get a shortcode as [video origem=youtube id=XXXXXX autoplay=true]

But autoplay param doesn't work in all video sites, I need to disable the checkbox when, for example, Vine is selected. How can I disable or hide the checkbox when my listbox is on "Vine" or "Vimeo" option, and reactivate it if the option returns to YouTube?

What have you tried?

Maybe I'm on the wrong way, but by now, I know a function can be used along with listbox params, so this...

   {
    type: 'listbox',    
    name: 'video_site',
    onselect: function( ) {
        if (this.value() == 'vine') {
            alert("Value is "+this.value());
        }
    },
    label: 'Escolha o site de origem',
    'values': [
        {text: 'YouTube', value: 'youtube'},
        {text: 'Vimeo', value: 'vimeo'},
        {text: 'Vine', value: 'vine'},
        ],
    },

... will take the value of my listbox with onselect. But I couldn't use it to target and disable the previous checkbox, using both:

$('input.mce-checkclass').prop('disabled',true);

and

$('input.mce-checkclass').attr('disabled',true);

Same for "aria-disabled" and targeting 'input[name=video_autoplay]'. Any idea, please?

EDIT: script working!

As suggested by bonger, the window can be loaded from a var, so it's easy to target any element. I added some setStyle to reduce opacity of checkbox and label when both are disabled, since it wasn't happening by default, at least in Chrome.

The final script, working as I need:

{
    text: 'Videos',
    onclick: function() {   
        var win = editor.windowManager.open({
            title: 'Embed Video',
            body: [
                {type: 'checkbox',
                name: 'video_autoplay',
                label: 'Autoplay?',
                text: 'Yes',
                id: 'check-autoplay',
                },

                {type: 'listbox',   
                name: 'video_site',
                onselect: function( ) {
                    var autoplay = win.find('#video_autoplay');
                    if (this.value() == 'vine') {
                        autoplay.disabled(true);
                        autoplay.value('');
                        tinyMCE.DOM.setStyle( 'check-autoplay-l','opacity', '.5');
                        tinyMCE.DOM.setStyle( 'check-autoplay','opacity', '.5');
                    } 
                    else {
                        autoplay.disabled(false);
                        tinyMCE.DOM.setStyle( 'check-autoplay','opacity', '1');     
                        tinyMCE.DOM.setStyle( 'check-autoplay-l','opacity', '1');
                    }   
                },
                label: 'Choose source',
                    'values': [
                        {text: 'YouTube', value: 'youtube'},
                        {text: 'Vimeo', value: 'vimeo'},
                        {text: 'Vine', value: 'vine'},
                    ],
                },

                {type: 'textbox',
                name: 'video_id',
                label: 'Video ID',
                value: ''
                },
            ],
        
        onsubmit: function( e ) {
            editor.insertContent('[video source="' + e.data.video_site + '" id="' + e.data.video_id +'" autoplay="'+ e.data.video_autoplay +'"]');
        }
    });
}
},

Answer 1

Looking though the existing plugins, the standard tinymce way to do this is to save the popup window in a win variable:

{
    text: 'Vídeos',
        onclick: function() {       
            var win = editor.windowManager.open({ //etc

And then use win.find('#name') to target the control, eg:

{type: 'listbox',   
name: 'video_site',
onselect: function( ) {
    var autoplay = win.find('#video_autoplay');
    if (this.value() == 'vine') {
        autoplay.disabled(true);
        autoplay.value('');
    } else {
        autoplay.disabled(false);
    }
},