Disable, Hide, Check & Select Elements

Different Ways to Disable Elements

1. Enabled State

The disabled attribute is a boolean attribute that, when applied, indicates the element should be disabled. A disabled element will be unusable and unclickable.

• Applicable elements: <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea>.

2. Read-Only State

The readonly attribute is also a boolean attribute. It specifies that an input field or text area is read-only when applied. While a user can focus, highlight, and copy text from a readonly field, they cannot modify its content.

• Applicable Elements: <input>, <textarea>.

Examples:

<textarea id="description" class="description box" readonly>
<button id="login" class="loginbtn btn primary" disabled>

---

Different Ways to Hide Elements

1. CSS Display Property: Setting an element’s CSS display property to none makes it invisible.

2. HTML Hidden Attribute: The hidden attribute is a boolean attribute that hides the element when present.

3. Setting Width and Height to Zero: If an element’s width & height are set to zero, it won’t be visible.

Examples:

<button id="login" class="loginbtn btn primary" hidden>

<button id="login" class="loginbtn btn primary" style="display:none;">

<button id="login" class="loginbtn btn primary" style="width:0px,height:0px;">

---

Different Ways to Check Elements

The checked attribute is used for <input> elements of type checkbox or radio. When present, it indicates that the element should be checked.

• Applicable Elements: <input>

Examples:

<input type="checkbox" id="username" checked>

---

Different Ways to Select Elements

The selected attribute is a boolean attribute. When present, it specifies that an option should be pre-selected when the page loads. The pre-selected option will be displayed first in the drop-down list.

Applicable Elements: <option>

Examples:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

---