diff --git a/cara/apps/calculator/static/js/form.js b/cara/apps/calculator/static/js/form.js
index 71510e8c..5a20f025 100644
--- a/cara/apps/calculator/static/js/form.js
+++ b/cara/apps/calculator/static/js/form.js
@@ -236,6 +236,20 @@ function on_ventilation_type_change() {
});
}
+function on_wearing_mask_change() {
+ wearing_mask = $('input[type=radio][name=mask_wearing_option]')
+ wearing_mask.each(function (index) {
+ if (this.checked) {
+ getChildElement($(this)).show();
+ require_fields(this);
+ }
+ else {
+ getChildElement($(this)).hide();
+ require_fields(this);
+ }
+ })
+}
+
/* -------UI------- */
function show_disclaimer() {
@@ -558,6 +572,12 @@ $(document).ready(function () {
// Call the function now to handle forward/back button presses in the browser.
on_ventilation_type_change();
+ // When the mask_wearing_option changes we want to make its respective
+ // children show/hide.
+ $("input[type=radio][name=mask_wearing_option]").change(on_wearing_mask_change);
+ // Call the function now to handle forward/back button presses in the browser.
+ on_wearing_mask_change();
+
// Setup the maximum number of people at page load (to handle back/forward),
// and update it when total people is changed.
setMaxInfectedPeople();
diff --git a/cara/apps/calculator/templates/calculator.form.html.j2 b/cara/apps/calculator/templates/calculator.form.html.j2
index 75cbbe5b..9b73d9fd 100644
--- a/cara/apps/calculator/templates/calculator.form.html.j2
+++ b/cara/apps/calculator/templates/calculator.form.html.j2
@@ -260,15 +260,18 @@