Атрибут disabled тега <fieldset> — блокування групи полів

HTML

<p>Виберіть домашню тваринку, яку б Ви хотіли мати і вкажіть ім'я:</p>
<form name="myForm">
  <select name="donate_type" onchange="disableField()">
  <option value="pet" disabled="disabled" selected="selected">Домашня тварина</option>
  <option value="dog">Собака</option>
  <option value="cat">Кіт</option>
  <option value="hamster">Хом'як</option>
</select>
</form>
<br>
<fieldset>
 <legend>Домашні тварини</legend>
<fieldset id="dog">
  <input type="text" placeholder="Собака">
</fieldset>
<br>
<fieldset id="cat">
  <input type="text" placeholder="Кіт">
</fieldset>
<br>
<fieldset id="hamster">
  <input type="text" placeholder="Хом'як">
</fieldset>
  <br>
  <input type="submit" value="Надіслати">
</fieldset>

JS

function disableField() {
  var a = document.forms["myForm"]["donate_type"].value;

  if (a === "dog") {
    document.getElementById("dog").disabled = false;
    document.getElementById("cat").disabled = true;
    document.getElementById("hamster").disabled = true;
  } else if (a === "cat") {
    document.getElementById("dog").disabled = true;
    document.getElementById("cat").disabled = false;
    document.getElementById("hamster").disabled = true;
  } else if (a === "hamster") {
    document.getElementById("dog").disabled = true;
    document.getElementById("cat").disabled = true;
    document.getElementById("hamster").disabled = false;
  } else {
    document.getElementById("pet").disabled = true;
    document.getElementById("cat").disabled = true;
    document.getElementById("hamster").disabled = true;
  }
}
document.getElementById("dog").disabled = true;
document.getElementById("cat").disabled = true;
document.getElementById("hamster").disabled = true;
//# sourceURL=pen.js

<p>З використанням атрибута 'disabled'</p>
<form>
  	<fieldset disabled>
      <legend>Форма для заповнення даних</legend>
  <label>Ім'я:</label><br>
  <input type="text" name="login"><br>
  <label>Email:</label><br>
  <input type="email" name="email"><br>
  <label>Ваше повідомлення:</label><br>
  <textarea name="messenger"></textarea>
  <br><br>
  <input type="submit" value="Увійти">
      	</fieldset>
</form>
<br>
<p>Без використання атрибута 'disabled'</p>
<form>
  <fieldset>
     <legend>Форма для заповнення даних</legend>
  <label>Ім'я:</label><br>
  <input type="text" name="login"><br>
  <label>Email:</label><br>
  <input type="email" name="email"><br>
  <label>Ваше повідомлення:</label><br>
  <textarea name="messenger"></textarea>
  <br><br>
  <input type="submit" value="Увійти">
     	</fieldset>
</form>

HTML

<form>
    <fieldset disabled>
        <legend><label><input type="checkbox"> Доставка на іншу адресу</label></legend>

        <p><label>Місто <input value="Київ"></label></p>
        <p><label>Коментар <textarea rows="2">до під'їзду</textarea></label></p>
        <p><label>Спосіб <select><option>кур'єр</option><option>пошта</option></select></label></p>
        <p><button type="button">Кнопка теж вимкнена</button>
            <a href="#dovidka">а це посилання лишається робочим</a></p>

        <fieldset>
            <legend>Вкладений блок без disabled</legend>
            <p><input value="вкладене поле — теж вимкнене"></p>
        </fieldset>

        <p><input disabled="false" value="disabled=&quot;false&quot; — усе одно вимкнене"></p>
    </fieldset>

    <fieldset>
        <legend>Звичайний блок для порівняння</legend>
        <p><input value="це поле робоче"></p>
        <p><input readonly value="readonly: видно, не редагується, але надсилається"></p>
    </fieldset>
</form>

CSS

p {
    margin: 10px 0;
}

fieldset {
    max-width: 560px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

fieldset:disabled {
    border-color: #d64545;
    border-style: dashed;
    background: #f4f5f7;
}

legend {
    padding: 0 6px;
    font-weight: 600;
}

label {
    font-size: .95em;
}

input,
select,
textarea,
button {
    padding: 5px 7px;
    font: inherit;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

:disabled {
    border-style: dotted;
    background: #ececec;
}

input:enabled,
button:enabled {
    border-color: #3a9a4f;
    background: #f3fbf4;
}

input:read-only:enabled {
    border-color: #f2b134;
    background: #fffaf0;
}