Few different ways to disable elements

1. Disabled

The disabled attribute is a boolean attribute. When present, it specifies that the element should be disabled. A disabled element is unusable.

Applicable to elements: <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, and <textarea>


2. Readonly

The readonly attribute is a boolean attribute. When present, it specifies that an input field or textarea is read-only. A read-only field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it). 

Applicable to elements: <input>, <textarea>


Example:

<textarea id="description" class="description box" readonly>

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

Few different ways to hide elements

1. Set to display:none

2. Form elements with type="hidden"

3. Width and height set to 0

4. A hidden parent element (this also hides child elements)

Other element interactions include clicking, selecting, and checking e.t.c


Example:

<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;">


Few different ways to check elements

The checked attribute is a boolean attribute. When present, it specifies that an <input> element should be pre-selected (checked) when the page loads.

Applicable to elements: <input>


Example:

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


Few 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 to elements: <option>


Example:

<select>

  <option value="volvo">Volvo</option>

  <option value="saab">Saab</option>

  <option value="vw">VW</option>

  <option value="audi" selected>Audi</option>

</select>



Source: W3Schools