Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แอตทริบิวต์ disabled ของ HTML <option>

แอตทริบิวต์ disabled ขององค์ประกอบ <option> ใช้สำหรับ ปิดใช้งานตัวเลือก ในรายการ (select/datalist) ตัวเลือกที่ disabled จะ คลิกไม่ได้ และ ไม่ถูกส่งไปกับฟอร์ม

ไวยากรณ์ (Syntax)

<option disabled>

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

<!DOCTYPE html>
<html>
<body>
<h2>ระดับสิ่งปนเปื้อนของน้ำ</h2>
<p>ระดับสิ่งปนเปื้อน <meter min="0" low="50" high="95" max="100" value="85"></meter></p>
<select>
  <optgroup label="อัตราส่วน">
    <option value="one">3:2</option>
    <option value="two" disabled>5:3</option>
  </optgroup>
  <optgroup label="น้ำ">
    <option value="low">2 ลิตร</option>
    <option value="medium">5 ลิตร</option>
    <option value="high">10 ลิตร</option>
    <option value="veryhigh">20 ลิตร</option>
  </optgroup>
</select>
</body>
</html>

ผลลัพธ์

ตัวเลือก "5:3" ภายใต้กลุ่ม "อัตราส่วน" จะเป็นสีเทาและเลือกไม่ได้

คำอธิบายโค้ด

  • ใช้ <optgroup> จัดกลุ่มตัวเลือก
  • <option value="two" disabled>5:3</option> — ตัวเลือกที่ 2 ถูก disabled
  • ผู้ใช้ไม่สามารถเลือก "5:3" ได้

การใช้งานจริง: ใช้เมื่อบางตัวเลือกไม่พร้อมใช้งานชั่วคราว (เช่น สินค้าหมดสต็อก, ฟีเจอร์ที่ยังไม่เปิดให้บริการ) แต่ยังต้องการแสดงให้เห็นว่ามีตัวเลือกนี้อยู่

รองรับ: ทุกเบราว์เซอร์สมัยใหม่ รวมถึง mobile browsers