Javascript-форум - diasble input в зависимости от выбранного в select

Здравствуйте.
Как сделать следующее:

если в списке выбран вариант1 (opt1), тогда отобразить 1й input (text1), остальные оставить заблокированными для ввода (disable кажется называется)

если вариант2 - 2й инпут отобразить, остальные блокировать
если вариант3 - все инпуты разблокированы.

да и еще вот вспомнил.
это не так важно, но было бы хорошо, если бы еще вот так было:
если в главном списке выбран вариант1 (megaopt1 - отобразить) - тогда все отображается ( при этом инпуты продолжают блокироваться в зависимости от выбранного в списке)
а если выбран megaopt2 - тогда происходит дисейбл второго списка и связанных с ним инпутов. можно даже не дисейбл, а вообще скрыть, может через css например, т.е. если выбран вариант2 - то вообще убрать с глаз долой все ненужное.

проблема в том, что js вообще не знаю. попытался разобраться, поикал примеры, но чето все немного не то.

<select name="megaspisok" id="megaspisok">
<option value="megaopt1" id="megaopt1">отобразить spisok и div text</option>
<option value="megaopt2" id="megaopt2">скрыть spisok и div text</option>
</select>

<select name="spisok" id="spisok">
<option value="opt1" id="opt1">Вариант 1</option>
<option value="opt2" id="opt2">Вариант 2</option>
<option value="opt3" id="opt3">Вариант 3</option>
</select>

<div class="text" id="text">
<p id="h1">Заголовок1</p>
<input type="text" name="text1" id="text1" value="1" />
<p id="h2">Заголовок2</p>
<input type="text" name="text2" id="text2"value="2" />
<p id="h3">Заголовок3</p>
<input type="text" name="text3" id="text3" value="3" />
</div>

На другом форуме подсказали
https://jsfiddle.net/0y992bav/
правда оно почему-то немножко не корректно работает, я по логике интуитивно поправил, и вышло что надо, вот может кому полезно будет:
https://jsfiddle.net/p8ddc8zn/1/