คุณสมบัติ disabled ของ Link ใน HTML DOM

คุณสมบัติ disabled ของอีลีเมนต์ <link> ใช้ตั้งค่าหรืออ่านสถานะการเปิดใช้งาน/ปิดใช้งานของลิงก์

ไวยากรณ์ (Syntax)

การอ่านค่า (boolean)

linkObject.disabled

การตั้งค่า

linkObject.disabled = booleanValue

ค่า Boolean

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

ตัวอย่างเดียวกับบทความ Link Object (1004064748) - ปิดใช้งาน stylesheet:

<!DOCTYPE html>
<html>
<head>
<title>Link Disabled</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
  <fieldset>
    <legend>Link-disabled</legend>
    <label for="WeekSelect">Sales Target Week: <input type="week" id="WeekSelect" value="2020-W13" disabled> </label>
    <input type="button" onclick="enableWeekInput()" value="Change Sales Target Week">
    <input type="button" onclick="beautify()" value="Disable Styling">
    <div id="divDisplay"></div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var inputWeek = document.getElementById("WeekSelect");
  var extStyle = document.getElementById("extStyle");
  divDisplay.textContent = 'Week Input disabled: ' + inputWeek.disabled;
  
  function enableWeekInput() {
    inputWeek.disabled = false;
    divDisplay.textContent = 'Week Input disabled: ' + inputWeek.disabled;
  }
  
  function beautify() {
    extStyle.disabled = true;
  }
</script>
</body>
</html>

ในตัวอย่าง style.css:

form { width:70%; margin: 0 auto; text-align: center; }
* { padding: 2px; margin:5px; }
input[type="button"] { border-radius: 10px; }

ผลลัพธ์

ก่อนคลิกปุ่ม "Disable Styling": ใช้ style.css ปกติ

หลังคลิกปุ่ม "Disable Styling": Stylesheet ถูก disable หน้าตาเปลี่ยนเป็น default

หมายเหตุ: รูปภาพตัวอย่างจากต้นฉบับไม่ได้รวมอยู่ในเนื้อหานี้