fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Disable inputs hidden by interactive-fieldset

Browse Source
This commit is contained in:
Gregor Kleen 2019-04-20 12:33:07 +02:00
parent feee06e80a
commit 38e8106852
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
static/js/utils/form.js
View File

@ -3,10 +3,6 @@
var formUtilities = []; var formUtilities = [];
var FORM_GROUP_SELECTOR = '.form-group';
var FORM_GROUP_WITH_ERRORS_CLASS = 'form-group--has-error';
/** /**
* *
* Reactive Submit Button Utility * Reactive Submit Button Utility
@ -153,11 +149,13 @@
var INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR = '.interactive-fieldset--target'; var INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR = '.interactive-fieldset--target';
var INTERACTIVE_FIELDSET_INITIALIZED_CLASS = 'interactive-fieldset--initialized'; var INTERACTIVE_FIELDSET_INITIALIZED_CLASS = 'interactive-fieldset--initialized';
var INTERACTIVE_FIELDSET_CHILD_SELECTOR = 'input:not([disabled])';
var interactiveFieldsetUtil = function(element) { var interactiveFieldsetUtil = function(element) {
var conditionalInput; var conditionalInput;
var conditionalValue; var conditionalValue;
var target; var target;
var childInputs;
function init() { function init() {
if (!element) { if (!element) {
@ -194,6 +192,8 @@
throw new Error('Interactive Fieldset needs to be a target or have a target-ancestor!'); 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 // add event listener
conditionalInput.addEventListener('input', updateVisibility); conditionalInput.addEventListener('input', updateVisibility);
@ -211,7 +211,13 @@
} }
function updateVisibility() { 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() { function matchesConditionalValue() {
@ -292,6 +298,10 @@
var FORM_ERROR_REMOVER_INITIALIZED_CLASS = 'form-error-remover--initialized'; var FORM_ERROR_REMOVER_INITIALIZED_CLASS = 'form-error-remover--initialized';
var FORM_ERROR_REMOVER_INPUTS_SELECTOR = 'input:not([type="hidden"]), textarea, select'; 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 formErrorRemoverUtil = function(element) {
var formGroups; var formGroups;