Check package only benefits as well (python#1670)

berinhard · web-flow · commit bc3d891800aa · 2020-11-12T08:02:58.000-05:00
A package only benefit's checkbox is rendered in the HTML with the
disabled attribute. Because of that, the click event wasn't being
triggered by the browser. This fix turn off and on this attribute so
the click event can happen.
diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js
@@ -17,12 +17,17 @@ $(document).ready(function(){
 
       checkboxesContainer.find(':checkbox').each(function(){
           $(this).prop('checked', false);
+          let packageOnlyBenefit = $(this).attr("package_only");
+          if (packageOnlyBenefit) $(this).attr("disabled", true);
       });
 
       let packageInfo = $("#package_benefits_" + package);
       packageInfo.children().each(function(){
           let benefit = $(this).html()
-          checkboxesContainer.find(`[value=${benefit}]`).trigger("click");
+          let benefitInput = checkboxesContainer.find(`[value=${benefit}]`);
+          let packageOnlyBenefit = benefitInput.attr("package_only");
+          benefitInput.removeAttr("disabled");
+          benefitInput.trigger("click");
       });
 
       let url = $("#cost_container").attr("calculate_cost_url");
@@ -38,7 +43,12 @@ $(document).ready(function(){
       if (costLabel.html() != "Updating cost...") costLabel.html("Submit your application and we'll get in touch...");
 
       let active = checkboxesContainer.find(`[value=${benefit}]`).prop("checked");
-      if (!active) return;
+      if (!active) {
+          let packageOnlyBenefit = $(this).attr("package_only");
+          if (packageOnlyBenefit) $(this).attr("disabled", true);
+          return;
+      }
+
 
       $(`#conflicts_with_${benefit}`).children().each(function(){
           let conflictId = $(this).html();
diff --git a/templates/sponsors/sponsorship_benefits_form.html b/templates/sponsors/sponsorship_benefits_form.html
@@ -48,7 +48,7 @@ <h3 class="title">{{ field.label }}</h3>
             {% for benefit in field.field.queryset %}
                 <li class="{% cycle '' 'highlight' %}">
                     <label for="id_{{field.name}}_{{ forloop.counter0 }}" title="{{ benefit.unavailability_message }}">
-                        <input id="id_{{field.name}}_{{ forloop.counter0 }}" name="{{ field.name }}" type="checkbox" value="{{ benefit.id }}" {% if benefit.unavailability_message %}disabled{% endif %} {% if benefit.id in field.initial %}checked{% endif %}>
+                        <input id="id_{{field.name}}_{{ forloop.counter0 }}" name="{{ field.name }}" type="checkbox" value="{{ benefit.id }}" {% if benefit.unavailability_message %}disabled{% endif %} {% if benefit.id in field.initial %}checked{% endif %} {% if benefit.package_only %}package_only='true'{% endif %}>
                         {{ benefit.name }}
                         {% if benefit.new %}<span class="fa fa-asterisk"></span>{% endif %}
                         {% if benefit.package_only %}<i class="fa fa-cubes"></i>{% endif %}
