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