แอตทริบิวต์ disabled

แอตทริบิวต์ disabled ปิดกั้นองค์ประกอบ HTML ฟอร์ม, นั่นคือทำให้มันไม่สามารถใช้งานได้ เป็นแอตทริบิวต์ ที่ไม่มีค่า

การปิดกั้นองค์ประกอบโดยทั่วไปจำเป็นเพื่อ ห้ามไม่ให้ผู้ใช้เปลี่ยนค่า บางค่า (ซึ่งอย่างไรก็ตาม ควรจะ แสดงให้ผู้ใช้เห็นในรูปแบบขององค์ประกอบฟอร์ม) บางครั้งองค์ประกอบถูกปิดกั้น (และปลดการปิดกั้น) ด้วย JavaSctipt

พฤติกรรม

ในกรณีของปุ่ม (button หรือ input พร้อมแอตทริบิวต์ type ในค่า button, reset หรือ submit) การปิดกั้น หมายความว่าไม่สามารถกดปุ่มได้ ในกรณีของช่องป้อนข้อความ (input หรือ textarea) จะไม่สามารถเปลี่ยนหรือคัดลอก ข้อความในนั้นได้ ในกรณีของ ช่องทำเครื่องหมาย และ ปุ่มตัวเลือก จะไม่สามารถ เปลี่ยนสถานะของพวกมัน (ถูกเลือกหรือไม่) ได้ ในกรณีของรายการแบบหล่นลง select จะไม่สามารถเปลี่ยนรายการที่เลือกในรายการได้

องค์ประกอบที่ถูกปิดกั้นโดยค่าเริ่มต้นจะมี พื้นหลังสีเทา มันจะไม่เข้าร่วม ใน การเปลี่ยนด้วย ปุ่ม Tab ด้วย

ตัวอย่าง . ปุ่มที่ถูกปิดกั้น

มาปิดกั้นปุ่มด้วยแอตทริบิวต์ disabled กัน เพื่อเปรียบเทียบ ด้านข้างเป็นตัวอย่าง ของปุ่มที่ไม่ได้ถูกปิดกั้น (ลองกดดู):

<button disabled>text</button>
<button>text</button>

ตัวอย่าง . ช่องทำเครื่องหมายที่ถูกปิดกั้น

ทีนี้มาดูที่ ช่องทำเครื่องหมาย ที่ถูกปิดกั้นกัน เพื่อเปรียบเทียบ ดูตัวอย่าง ช่องทำเครื่องหมายที่ไม่ได้ถูกปิดกั้นด้านข้าง:

<input type="checkbox" disabled>
<input type="checkbox">

ตัวอย่าง . ช่องทำเครื่องหมายที่ถูกปิดกั้นและถูกเลือก

มาดูกันว่าช่องทำเครื่องหมายที่ถูกปิดกั้น และถูกเลือกด้วยแอตทริบิวต์ checked หน้าตาเป็นอย่างไร สำหรับการเปรียบเทียบ ด้านข้าง ดูตัวอย่างช่องทำเครื่องหมายที่ถูกเลือกแต่ไม่ได้ถูกปิดกั้น:

<input type="checkbox" disabled checked>
<input type="checkbox" checked>

ตัวอย่าง . ช่องป้อนข้อมูลข้อความที่ถูกปิดกั้น

ทีนี้มาปิดกั้น input กัน สำหรับการเปรียบเทียบ ดูตัวอย่าง input ที่ไม่ได้ถูกปิดกั้นด้านข้าง:

<input type="text" value="text" disabled>
<input type="text" value="text">

ตัวอย่าง . textarea ที่ถูกปิดกั้น

และที่นี่เราจะเห็น textarea ที่ถูกปิดกั้น (สังเกตว่าสามารถเปลี่ยนขนาดของ textarea ที่ถูกปิดกั้นได้) สำหรับการเปรียบเทียบ ดูตัวอย่าง textarea ที่ไม่ได้ถูกปิดกั้นด้านข้าง:

<textarea disabled>text</textarea>
<textarea>text</textarea>

ตัวอย่าง . รายการแบบหล่นลงที่ถูกปิดกั้น

มาดูกันว่า select ที่ถูกปิดกั้นทำงานอย่างไร สำหรับการเปรียบเทียบ ดูตัวอย่างรายการแบบหล่นลง ที่ไม่ได้ถูกปิดกั้นด้านข้าง:

<select disabled>
	<option>city1</option>
	<option selected>city2</option>
	<option>city3</option>
	<option>city4</option>
</select>
<select>
	<option>city1</option>
	<option selected>city2</option>
	<option>city3</option>
	<option>city4</option>
</select>

ดูเพิ่มเติม

คลาสหลอก disabled,
ซึ่งกำหนดสไตล์ให้กับองค์ประกอบที่ถูกปิดกั้น
คลาสหลอก enabled,
ซึ่งกำหนดสไตล์ให้กับองค์ประกอบที่ไม่ได้ถูกปิดกั้น