＜目次＞
(１) Pleasanter項目の活性制御のやり方について（スクリプト）
(１-１) やりたいこと
(１-２) 設定箇所
(１-３) パターン①：ステータスに応じて「静的」に制御
(１-４) パターン①：ステータスに応じて「静的」に制御
(１-５) まとめ
(１) Pleasanter項目の活性制御のやり方について（スクリプト）
(１-１) やりたいこと
・Pleasanter項目の活性制御のやり方（スクリプトによる制御）を理解する。
・静的な制御（ステータスに応じて初期の活性制御をハンドリング）のやり方を理解する。
・動的な制御（ステータスを切り替えると、リアルタイムに活性制御も追従）のやり方を理解する。
(１-２) 設定箇所
・Pleasanterの場合、「スクリプト」にカスタムのJavaScriptを記述して、フロントエンドを制御する事ができます。
（図１１０）
(１-３) パターン①：ステータスに応じて「静的」に制御
⇒ステータスに応じた、初期状態を制御する
（サンプルスクリプト）
$p.events.on_editor_load = function () {
console.log("活性制御テスト");
switch($("#Issues_Status").val()) {
// 未着手
case '100':
// 非活性
$('#Issues_ClassA').prop('disabled', true).css('background-color','#5b5b5b');
break;
// 準備中
case '150':
// 非活性
$('#Issues_ClassB').prop('disabled', true).css('background-color','#5b5b5b');
break;
// 実施中
case '200':
// 非活性
$('#Issues_ClassC').prop('disabled', true).css('background-color','#5b5b5b');
break;
// レビュー
case '300':
// 非活性
$('#Issues_ClassD').prop('disabled', true).css('background-color','#5b5b5b');
break;
// 完了
case '900':
// 非活性
$('#Issues_ClassE').prop('disabled', true).css('background-color','#5b5b5b');
break;
// 保留
case '910':
// 非活性
$('#Issues_ClassF').prop('disabled', true).css('background-color','#5b5b5b');
break;
default:
break;
}
}
（動画１１１）各ステータスの明細を開くと、該当の項目がグレーアウトされている
（補足）
・$p.events.on_editor_loadで「編集画面」を読み込んだときに実行するメソッドを定義しています。
（参考）開発者向け機能：スクリプト：$p.events.on_editor_load
(１-４) パターン②：ステータスに応じて「静的」に制御
⇒プルダウンに応じてリアルタイムに制御する
（サンプルスクリプト）
$(document).on('change', '#Issues_Status', function () {
console.log("活性制御テスト");
switch($("#Issues_Status").val()) {
// 未着手
case '100':
// 非活性
$('#Issues_ClassA').prop('disabled', true).css('background-color','#5b5b5b');
$('#Issues_ClassB').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassC').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassD').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassF').prop('disabled', false).css('background-color','#ffffff');
break;
// 準備中
case '150':
// 非活性
$('#Issues_ClassA').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassB').prop('disabled', true).css('background-color','#5b5b5b');
$('#Issues_ClassC').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassD').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassF').prop('disabled', false).css('background-color','#ffffff');
break;
// 実施中
case '200':
// 非活性
$('#Issues_ClassA').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassB').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassC').prop('disabled', true).css('background-color','#5b5b5b');
$('#Issues_ClassD').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassF').prop('disabled', false).css('background-color','#ffffff');
break;
// レビュー
case '300':
// 非活性
$('#Issues_ClassA').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassB').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassC').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassD').prop('disabled', true).css('background-color','#5b5b5b');
$('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassF').prop('disabled', false).css('background-color','#ffffff');
break;
// 完了
case '900':
// 非活性
$('#Issues_ClassA').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassB').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassC').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassD').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassE').prop('disabled', true).css('background-color','#5b5b5b');
$('#Issues_ClassF').prop('disabled', false).css('background-color','#ffffff');
break;
// 保留
case '910':
// 非活性
$('#Issues_ClassA').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassB').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassC').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassD').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');
$('#Issues_ClassF').prop('disabled', true).css('background-color','#5b5b5b');
break;
default:
break;
}
})
（動画１２１）明細編集時に項目を選択すると、それに応じた活性制御が動的に追従する
（補足）
・動的に切り替える時は、各パターンでIssues_ClassA～Fまで全部について、制御を明記する必要があります。
・そうしないと、グレーアウトがどんどん累積していったりします（動的に切り替わらない）
・よって、ステータス単位で活性にする項目は、色をffffffに明示的に指定する必要あり
(１-５) まとめ
・非活性（例）
$('#Issues_ClassF').prop('disabled', true).css('background-color','#5b5b5b');
・活性（例）
$('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');
・動的制御
$(document).on('change', '[制御に使う項目]', function () { //制御処理 }
・（参考）項目の非表示
$('#Issues_ClassF').css('display','none');
・（参考）項目の再表示
$('#Issues_ClassF').css('display','');
