[BUGFIX] Fix override handling for element specific field values

This patch fixes a broken JavaScript code which removes the field and
placeholder divs in FormeEngine.js field override handling.

Resolves: #84689
Related: #79440
Related: #70032
Releases: master, 8.7
Change-Id: I91d40b6ff7baa9fa9ea121458a7a9faaa00ec6f9
Reviewed-on: https://review.typo3.org/57348
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Tymoteusz Motylewski <t.motylewski@gmail.com>
Tested-by: Tymoteusz Motylewski <t.motylewski@gmail.com>

typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js

@@ -697,8 +697,7 @@ define(['jquery',
       // Null checkboxes without placeholder click event handler
       $(this).closest('.t3js-formengine-field-item').toggleClass('disabled');
     }).on('change', '.t3js-form-field-eval-null-placeholder-checkbox input[type="checkbox"]', function(e) {
-      $(this).closest('.t3js-formengine-field-item').find('.t3js-formengine-placeholder-placeholder').toggle();
-      $(this).closest('.t3js-formengine-field-item').find('.t3js-formengine-placeholder-formfield').toggle();
+      FormEngine.toggleCheckboxField($(this));
     }).on('change', '.t3js-l10n-state-container input[type=radio]', function(event) {
       // Change handler for "l10n_state" field changes
       var $me = $(this);
@@ -989,17 +988,26 @@ define(['jquery',
    */
   FormEngine.initializeNullWithPlaceholderCheckboxes = function() {
     $('.t3js-form-field-eval-null-placeholder-checkbox').each(function() {
-      // Set initial state of both div's (one containing actual field, other containing placeholder field)
-      // depending on whether checkbox is checked or not
-      var $checkbox = $(this).find('input[type="checkbox"]');
-      if ($checkbox.attr('checked')) {
-        $(this).closest('.t3js-formengine-field-item').find('.t3js-formengine-placeholder-placeholder').hide();
-      } else {
-        $(this).closest('.t3js-formengine-field-item').find('.t3js-formengine-placeholder-formfield').hide();
-      }
+      FormEngine.toggleCheckboxField($(this).find('input[type="checkbox"]'));
     });
   };
 
+  /**
+   * Set initial state of both div's (one containing actual field, other containing placeholder field)
+   * depending on whether checkbox is checked or not
+   * @param $checkbox
+   */
+  FormEngine.toggleCheckboxField = function($checkbox) {
+    var $item = $checkbox.closest('.t3js-formengine-field-item');
+    if ($checkbox.prop('checked')) {
+      $item.find('.t3js-formengine-placeholder-placeholder').hide();
+      $item.find('.t3js-formengine-placeholder-formfield').show();
+    } else {
+      $item.find('.t3js-formengine-placeholder-placeholder').show();
+      $item.find('.t3js-formengine-placeholder-formfield').hide();
+    }
+  };
+
   /**
    * This is the main function that is called on page load, but also after elements are asynchronously
    * called e.g. after inline elements are loaded, or a new flexform section is added.