Html Question posted in
Some basic documentation can be found here.

Html – Hiding a parent div based on all child inputs being disabled

I am trying to {display:none} on class="filter-form__group" only if ALL child Input’s are ‘disabled’.

<div class="filter-form__group">
  <div class="filter-form__group-filter-wrapper" data-filter-type="list">
    <div class="filter-form__list-wrapper">
      <ul class="filter-form__list">
        <li class="filter-item">
          <label data-filter-item="" class="filter-item__content">
            <input type="checkbox" value="Luggage" disabled>
          </label>
        </li>
        <li class="filter-item">
          <label data-filter-item="" class="filter-item__content">
            <input type="checkbox" value="Motorcycle" disabled>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>

Thanks!

I tried some CSS but they do not seem to work and I believe this may have to be done in JS.

Tags:

3

Answers


  1. 0

    Yep, you’re right—this is something that CSS can’t do. Since you need to check if all the input elements inside a specific group are disabled, JavaScript will work.

    Here’s how I would do it:

    document.querySelectorAll('.filter-form__group').forEach(function(group) {
const inputItems = group.querySelectorAll('input');

const allDisabled = Array.from(inputItems).every(input => input.disabled);

if (allDisabled) {
    group.style.display = 'none';
}

    });

    Login or Signup to reply.
  2. 0

    Try this, mostly will work

    JSfiddle: https://jsfiddle.net/2e34tzjq/

    const filterFormGroups = document.querySelectorAll('.filter-form__group');
filterFormGroups.forEach(group => {
  const inputs = group.querySelectorAll('input[type="checkbox"]');
  const allDisabled = Array.from(inputs).every(input => input.disabled);
  if (allDisabled) {
    group.style.display = 'none';
  }
});
    Login or Signup to reply.
  3. 0

    Iterate over the potentially disabled elements and push truthy comparisons into an empty array. Then compare the length of the array and input elements nodeList length and add/remove a helper class to the target element accordingly.

    function disableGroup(el) {
  const group = document.querySelector(el); // get the group parent element
  const inputs = group.querySelectorAll('input'); // get inputs
  const result = []; // empty array 
  inputs.forEach(input => { // loop over the inputs
    input.disabled ? result.push(true) : null; // if input.disabled push true into array   
  });   
  result.length === inputs.length ? // compare the two lengths
    group.classList.add('none') : // if they are equal add helper class
    group.classList.remove('none') // if not remove helper class
}

disableGroup('.filter-form__group');

disableGroup('.filter-form__group2');
    .none {
  display: none;
}
    Do not display filter-form__group if all input childNodes are disabled

<div class="filter-form__group">
  <div class="filter-form__group-filter-wrapper" data-filter-type="list">
    <div class="filter-form__list-wrapper">
      <ul class="filter-form__list">
        <li class="filter-item">
          <label data-filter-item="" class="filter-item__content">
            Form group 1:<input type="checkbox" value="Luggage" disabled>
          </label>
        </li>
        <li class="filter-item">
          <label data-filter-item="" class="filter-item__content">
            Form group 1:<input type="checkbox" value="Motorcycle" disabled>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="filter-form__group2">
  <div class="filter-form__group-filter-wrapper" data-filter-type="list">
    <div class="filter-form__list-wrapper">
      <ul class="filter-form__list">
        <li class="filter-item">
          <label data-filter-item="" class="filter-item__content">
            Form group 2:<input type="checkbox" value="Luggage" disabled>
          </label>
        </li>
        <li class="filter-item">
          <label data-filter-item="" class="filter-item__content">
            Form group 2:<input type="checkbox" value="Motorcycle">
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search