列表框的值更改时如何禁用复选框

时间:2014-12-20 作者:Daniel Lemes

我正在tinyMCE中为WordPress创建一个自定义弹出窗口,以插入视频短代码,因此我在列表框中有一个网站列表(YouTube、Vimeo、Vine和其他网站),还有一个复选框,让用户决定添加粒子;“自动播放”;。

这是脚本的简化版本(视频部分):

{
    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 +\'"]\');
            }
        });
    } 
},
。。。这是它生成的窗口(唯一的区别是复选框的位置,我在打印后将其放在第一位:

enter image description here

所以我可以得到一个短代码[video origem=youtube id=XXXXXX autoplay=true]

但并非所有视频网站都能使用自动播放参数,我需要在选中Vine(例如)时禁用该复选框。当我的列表框打开时,我如何禁用或隐藏复选框;藤蔓“;或“或”;Vimeo“;选项,并在该选项返回YouTube时重新激活它?

What have you tried?

也许我走错了路,但现在,我知道一个函数可以与listbox参数一起使用,所以这个。。。

   {
    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\'},
        ],
    },
。。。将使用onselect获取我的列表框的值。但我无法使用它来定位和禁用前面的复选框,同时使用以下两种方法:

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

$(\'input.mce-checkclass\').attr(\'disabled\',true);
“相同”;aria禁用”;并以“input[name=video\\u autoplay]”为目标。有什么想法吗?

编辑:脚本工作

正如bonger所建议的,可以从var加载窗口,因此很容易针对任何元素。我添加了一些setStyle,以减少复选框和标签在禁用时的不透明度,因为它在默认情况下不会发生,至少在Chrome中不会发生。

最后的脚本,按我的需要工作:

{
    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 +\'"]\');
        }
    });
}
},

1 个回复
最合适的回答,由SO网友:bonger 整理而成

查看现有插件,标准的tinymce方法是将弹出窗口保存在win 变量:

{
    text: \'Vídeos\',
        onclick: function() {       
            var win = editor.windowManager.open({ //etc
然后使用win.find(\'#name\') 以控制为目标,例如:

{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);
    }
},

结束

相关推荐

在“增加缩进”TinyMCE中将填充更改为文本缩进

如果在可视化编辑器中单击“增加缩进”,则会将以下代码添加到文本编辑器中:<p style=\"padding-left:30px;\"> 如何将其更改为text-indent: 30px; 不影响核心文件?我搜索了很多文件,没有找到任何可能导致这种情况的代码。谢谢