Issue #2937191: Render using theme input and select instead of lists with links for checkboxes and dropdown

js/checkbox-widget.js

 /**
  * @file
- * Transforms links into checkboxes.
+ * Navigate to the correct url when a checkbox changes.
  */
 
 (function ($, Drupal, once) {
@@ -10,7 +10,9 @@
   Drupal.facets = Drupal.facets || {};
   Drupal.behaviors.facetsCheckboxWidget = {
     attach: function (context) {
-      Drupal.facets.makeCheckboxes(context);
+      // Find all checkbox facet results and add an event listener.
+      var $checkboxes = $(once('facets-checkbox-transform', '.js-facets-checkbox-links input[type="checkbox"]', context));
+      $checkboxes.each(Drupal.facets.addCheckboxChangeListener);
     }
   };
 
@@ -28,67 +30,15 @@
   };
 
   /**
-   * Turns all facet links into checkboxes.
+   * Add event listener to the change event of the checkboxes to navigate to the correct url.
    */
-  Drupal.facets.makeCheckboxes = function (context) {
-    // Find all checkbox facet links and give them a checkbox.
-    var $checkboxWidgets = $(once('facets-checkbox-transform', '.js-facets-checkbox-links', context));
-
-    if ($checkboxWidgets.length > 0) {
-      $checkboxWidgets.each(function (index, widget) {
-        var $widget = $(widget);
-        var $widgetLinks = $widget.find('.facet-item > a');
-
-        // Add correct CSS selector for the widget. The Facets JS API will
-        // register handlers on that element.
-        $widget.addClass('js-facets-widget');
-
-        // Transform links to checkboxes.
-        $widgetLinks.each(Drupal.facets.makeCheckbox);
-
-        // We have to trigger attaching of behaviours, so that Facets JS API can
-        // register handlers on checkbox widgets.
-        Drupal.attachBehaviors(this.parentNode, Drupal.settings);
-      });
-
-    }
-
-    // Set indeterminate value on parents having an active trail.
-    $('.facet-item--expanded.facet-item--active-trail > input').prop('indeterminate', true);
-  };
-
-  /**
-   * Replace a link with a checked checkbox.
-   */
-  Drupal.facets.makeCheckbox = function () {
-    var $link = $(this);
-    var active = $link.hasClass('is-active');
-    var description = $link.html();
-    var href = $link.attr('href');
-    var id = $link.data('drupal-facet-item-id');
-
-    var checkbox = $('<input type="checkbox" class="facets-checkbox">')
-      .attr('id', id)
-      .data($link.data())
-      .data('facetsredir', href);
-    var label = $('<label for="' + id + '">' + description + '</label>');
-
-    checkbox.on('change.facets', function (e) {
-      e.preventDefault();
-
-      var $widget = $(this).closest('.js-facets-widget');
-
-      Drupal.facets.disableFacet($widget);
-      $widget.trigger('facets_filter', [ href ]);
+  Drupal.facets.addCheckboxChangeListener = function () {
+    var $checkbox = $(this);
+    $checkbox.on('change.facets', function (e) {
+      var $widget = $checkbox.parents('.js-facets-checkbox-links');
+      Drupal.facets.disableCheckboxFacet($widget);
+      $widget.trigger('facets_filter', [ $checkbox.val() ]);
     });
-
-    if (active) {
-      checkbox.attr('checked', true);
-      label.find('.js-facet-deactivate').remove();
-    }
-
-    $link.before(checkbox).before(label).hide();
-
   };
 
   /**
@@ -115,6 +65,16 @@
     $('input.facets-checkbox', $facet).attr('disabled', true);
   };
 
+  /**
+   * Callback to disable checkbox facets.
+   */
+  Drupal.facets.disableCheckboxFacet = function ($widget) {
+    $widget.addClass('facets-disabled form-disabled');
+    var $checkboxes = $('input[type="checkbox"]', $widget);
+    $checkboxes.click(Drupal.facets.preventDefault);
+    $checkboxes.attr('disabled', true);
+  };
+
   /**
    * Event listener for easy prevention of event propagation.
    *