[チケットのステータスに応じて、カスタムフィールドの表示/非表示を切り替える] サンプル作成

Author: onozaty

README.md

@@ -15,6 +15,7 @@ If this project serves you well, please support this project as a [sponsor](http
 
 * [Set the default value by tracker / トラッカーに応じてデフォルト値を設定](./examples/0003.set_default_value_by_tracker/example.md)  
 * [Link custom fields (refining the children according to the parent value) / カスタムフィールドを連動させる(親の値に応じて、子を絞り込む)](./examples/0007.link_custom_fields/example.md)  
+* [Change the visibility of custom fields by status / チケットのステータスに応じて、カスタムフィールドの表示/非表示を切り替える](./examples/0008.change_custom_field_visibility_by_status/example.md)
 
 ### Issues list / チケット一覧
 
@@ -29,7 +30,6 @@ If this project serves you well, please support this project as a [sponsor](http
 
 ### Old
 
-* [チケットのステータスに応じて、カスタムフィールドの表示/非表示を切り替える](./old-examples/change_custom_field_visibility_when_change_status.js)
 * [新しいチケットタブを表示する(Redmine3.3で"+"ボタンと両立した時)](./old-examples/add_new_issue_tab.js)
 * [チケット一覧の進捗率にて値も表示する](./old-examples/add_value_of_progress_on_issues_list.js)
 * [カスタムフィールドのチェックボックスを2列で表示](./old-examples/multi_column_checkbox.css)

examples/0008.change_custom_field_visibility_by_status/example.md

@@ -0,0 +1,56 @@
+# Change the visibility of custom fields by status
+
+Change the visibility of custom fields by status.  
+ステータス毎にカスタムフィールドの表示/非表示を切り替えます。
+
+In this example, the custom field 1 will be displayed only if the status ID is 2.  
+この例では、ステータスIDが2の場合のみ、カスタムフィールド1が表示します。
+
+## Setting
+
+### Path Pattern
+
+None
+
+### Insert Position
+
+Bottom of issue form
+<!-- 
+Head of all pages
+Bottom of issue form
+Bottom of issue detail
+Bottom of all pages
+-->
+
+### Code
+
+JavaScript
+<!--
+JavaScript
+CSS
+HTML
+-->
+
+```javascript
+$(function() {
+
+  const targetCustomFieldId = '1';
+
+  const targetCustomFieldInput = $('#issue_custom_field_values_' + targetCustomFieldId);
+  const targetCustomFieldDisplay = $('div.cf_' + targetCustomFieldId + '.attribute');
+
+  const visible = $('#issue_status_id').val() == '2';
+
+  if (visible) {
+    targetCustomFieldInput.parent().show();
+    targetCustomFieldDisplay.show();
+  } else {
+    targetCustomFieldInput.parent().hide();
+    targetCustomFieldDisplay.hide();
+  }
+});
+```
+
+## Result
+
+![result](./result.gif)