web-dev-qa-db-ja.com

リストボックスの値が変わったときにチェックボックスを無効にする方法

私はWordPress用にtinyMCEでカスタムポップアップを作成してビデオのショートコードを挿入するので、リストボックスにウェブサイト（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]としてショートコードを得ることができます

しかし、 autoplay paramはすべてのビデオサイトで機能するわけではありません。たとえば、Vineが選択されている場合は、チェックボックスを無効にする必要があります。リストボックスが "Vine"または "Vimeo"オプションのときにチェックボックスを無効にしたり非表示にしたり、オプションがYouTubeに戻ったら再び有効にするにはどうすればよいですか。

何を試しましたか？

たぶん私は間違った道を進んでいますが、今ではリストボックスのパラメータと一緒に関数を使うことができることを知っているので、これは...

   {
    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-disabled"および 'input [name = video_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 +'"]');
        }
    });
}
},
jqueryshortcodetinymce
3
Daniel Lemes

既存のプラグインを見てみると、これを行うための標準的な方法は、ポップアップウィンドウを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);
    }
},
0
bonger