HTML <optgroup> disabled Attribute - ปิดใช้งานกลุ่มตัวเลือก

แอตทริบิวต์ disabled ของ <optgroup> ใช้ **ปิดใช้งานกลุ่มตัวเลือกทั้งกลุ่ม** ใน <select> ทำให้ <option> ทุกตัวในกลุ่มนั้นไม่สามารถเลือกได้

รูปแบบการใช้งาน

<optgroup label="ชื่อกลุ่ม" disabled>
  <option value="1">ตัวเลือก 1</option>
  <option value="2">ตัวเลือก 2</option>
</optgroup>

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 2rem; }
    select { 
      width: 300px; 
      padding: 10px; 
      font-size: 16px; 
      border: 2px solid #ddd;
      border-radius: 6px;
    }
    optgroup { font-weight: bold; color: #333; }
    optgroup[disabled] { color: #999; }
    option { font-weight: normal; }
  </style>
</head>
<body>
  <h2>ระดับน้ำ (Water Levels)</h2>
  <p>ระดับสิ่งปนเปื้อน: <meter min="0" low="50" high="95" max="100" value="85"></meter></p>
  
  <label for="water-select">เลือกกลุ่มและระดับน้ำ:</label>
  <br><br>
  <select id="water-select">
    <optgroup label="อัตราส่วน (Ratio)">
      <option value="one">3:2</option>
      <option value="two">5:3</option>
    </optgroup>
    
    <optgroup label="ปริมาณน้ำ (Water)" disabled>
      <option value="low">2 ลิตร</option>
      <option value="medium">5 ลิตร</option>
      <option value="high">10 ลิตร</option>
      <option value="veryhigh">20 ลิตร</option>
    </optgroup>
  </select>
  
  <script>
    // ตรวจสอบค่าที่เลือก
    document.getElementById('water-select').addEventListener('change', (e) => {
      const selected = e.target.selectedOptions[0];
      if (selected.parentElement.disabled) {
        alert('กลุ่มนี้ถูกปิดใช้งาน - ไม่สามารถเลือกได้');
        e.target.value = ''; // รีเซ็ตการเลือก
      } else {
        console.log('เลือก:', selected.value, selected.textContent);
      }
    });
  </script>
</body>
</html>

พฤติกรรมของเบราว์เซอร์

• กลุ่มที่ disabled จะแสดงในสีจาง (grayed out)
• ผู้ใช้ไม่สามารถเลือก option ในกลุ่มนั้นได้
• ค่า value ของ option ที่ disabled จะไม่ส่งไปกับฟอร์ม
• Keyboard navigation จะข้ามกลุ่มที่ disabled ไป

การใช้งานกับ JavaScript (Dynamic)

<script>
  const select = document.getElementById('water-select');
  const waterGroup = select.querySelector('optgroup[label="ปริมาณน้ำ (Water)"]');
  
  // เปิด/ปิดกลุ่มไดนามิก
  function toggleWaterGroup(enable) {
    waterGroup.disabled = !enable;
    // อัปเดต UI ตามสถานะ
    waterGroup.style.color = enable ? '#333' : '#999';
  }
  
  // ตัวอย่าง: เปิดกลุ่มน้ำเมื่อเลือก "Ratio: 5:3"
  select.addEventListener('change', () => {
    if (select.value === 'two') {
      toggleWaterGroup(true);
    }
  });
</script>

ความแตกต่าง: disabled optgroup vs disabled option

กรณีใช้งานจริง

• สินค้าหมดสต็อก (disable กลุ่มหมวดหมู่นั้น)
• สิทธิ์การเข้าถึง (ผู้ใช้ระดับต่ำไม่เห็นตัวเลือกพรีเมียม)
• การกรองข้อมูล (filter) - ซ่อนตัวเลือกที่ไม่เกี่ยวข้อง
• ขั้นตอน wizard - ปิดขั้นตอนที่ยังไม่ถึง