MAIL
コントロールCSSと連携したスクリプト例
今回は、選択肢（分類Ａ）で「その他」を選んだ時に、「その他の入力欄」（説明Ａ）が入力できるようになり、「その他」以外が選択されたときには「その他入力欄」が非活性になるようにします。
まずは、分類Aと説明Aを含むサイトを作成します。この部分の説明は省略いたします。
説明Aの詳細設定で「コントロールCSS」の項目に「disabled」と入力しておきます。
次にスクリプトです。
以下のスクリプトを作成しましょう。名前は適当につけてください。
出力先は、「新規作成」と「編集」にチェックを入れておきます。
以下の6行目と10行目に出てくる $('.disabled') が、コントロールCSSで指定した名前部分です。
つまり、分類Aで「その他」が選択されたときに説明Aが活性化され背景色も白になります。
逆に「その他以外」が選択されたときには、説明Aが非活性になり背景色はグレーになります。
＜スクリプト＞
$p.events.on_editor_load = function () {
//分類Aに変更があったときに動作させる
('#Results_ClassA').change(function() {
//「その他」が選択されたときにの処理
if($('#Results_ClassA').val() === "その他"){
$('.disabled')
.prop('disabled', false)
.css('background-color','#ffffff');
}else{
$('.disabled')
.prop('disabled', true)
.css('background-color','#dddddd');
}
});
};
コントロールCSSについて
こんにちは、CCSの田中です。
エディタで拡張項目（「分類A」や「説明A」など）を設定する詳細設定の画面で「コントロールCSS」という設定項目があることをご存じでしょうか？
これはどうやって使うのかを実際の設定を例に挙げて説明したいと思います。
なお、このコントロールCSSの機能は、バージョンv0.50.216で追加されています。それ以前のバージョンをご使用の方は、バージョンアップをしてからお試しください。
コントロールCSSを簡単に説明すると、コントロールCSSの項目に設定した名前を使って、スクリプト上でスタイルを指定したりできます。複数の個所で同じ動作をさせたいときなどに便利ですね。
さて、詳細は次で説明していきます。