diff --git a/static/js/utils/form.js b/static/js/utils/form.js index 1f2c87c6c..b2a449e2a 100644 --- a/static/js/utils/form.js +++ b/static/js/utils/form.js @@ -3,10 +3,6 @@ var formUtilities = []; - var FORM_GROUP_SELECTOR = '.form-group'; - var FORM_GROUP_WITH_ERRORS_CLASS = 'form-group--has-error'; - - /** * * Reactive Submit Button Utility @@ -153,11 +149,13 @@ var INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR = '.interactive-fieldset--target'; var INTERACTIVE_FIELDSET_INITIALIZED_CLASS = 'interactive-fieldset--initialized'; + var INTERACTIVE_FIELDSET_CHILD_SELECTOR = 'input:not([disabled])'; var interactiveFieldsetUtil = function(element) { var conditionalInput; var conditionalValue; var target; + var childInputs; function init() { if (!element) { @@ -194,6 +192,8 @@ throw new Error('Interactive Fieldset needs to be a target or have a target-ancestor!'); } + childInputs = Array.from(element.querySelectorAll(INTERACTIVE_FIELDSET_CHILD_SELECTOR)); + // add event listener conditionalInput.addEventListener('input', updateVisibility); @@ -211,7 +211,13 @@ } function updateVisibility() { - target.classList.toggle('hidden', !matchesConditionalValue()); + var active = matchesConditionalValue(); + + target.classList.toggle('hidden', !active); + + childInputs.forEach(function(el) { + el.toggleAttribute('disabled', !active); + }); } function matchesConditionalValue() { @@ -292,6 +298,10 @@ var FORM_ERROR_REMOVER_INITIALIZED_CLASS = 'form-error-remover--initialized'; var FORM_ERROR_REMOVER_INPUTS_SELECTOR = 'input:not([type="hidden"]), textarea, select'; + var FORM_GROUP_SELECTOR = '.form-group'; + var FORM_GROUP_WITH_ERRORS_CLASS = 'form-group--has-error'; + + var formErrorRemoverUtil = function(element) { var formGroups;