Как сделать disabled валидацию select'ов таблицы?

Question

[Павел]

https://jsfiddle.net/KLON/xzqv6rc8/1/

есть такая табличка, там будет в каждом td один select , у каждого select есть option value = "none" , рядов будет неизвестно сколько, строчек много тоже будет.

надо при выборе != none делать следующий select не disabled и наоборот , как бы лесенкой включать и выключать все селекты , при выключении надо убирать value

У самого каркаса таблицы мы можем ставить любые классы,id и все что душе угодно )

как такую хитрую систему замутить?

Answer 1

[0xD34F]

$('table').on('change', 'select', ({ target: t }) => {
  const isNone = t.value === 'none';

  $(t)
    .closest('td')
    [isNone ? 'nextAll' : 'next']()
    .find('select')
    .prop('disabled', isNone)
    .val((i, val) => isNone ? 'none' : val);
});

или

document.querySelector('table').addEventListener('change', ({ target: t }) => {
  if (t.tagName === 'SELECT') {
    const isNone = t.value === 'none';
    const { cellIndex: i, parentNode: { children } } = t.closest('td');

    [...children].slice(i + 1, isNone ? undefined : i + 2).forEach(n => {
      const select = n.querySelector('select');
      select.disabled = isNone;
      select.value = isNone ? 'none' : select.value;
    });
  }
});

Comments

[Павел]

ну магия прямо о_О
только додумал уже в момент проверки, если выключить один select из середины то следующие все равно включены

это вообще возможно сделать?

[0xD34F]

обновил ответ

[Павел]

0xD34F, сколько же надо лет работать чтоб шарить так как вы...?
а у вас нет своего блога или твитера или канала на ютубе? Очень хотелось бы услышать вашу "тернистую историю" )