When setting the attribute value on an element, it's important to use a string that matches the attribute being set. For instance, if you are setting the disabled attribute, then you should set it to "disabled".
HTML
<input type="text" disabled="disabled" />
JavaScript
$("#id").attr("disabled", "disabled");
On the other hand, when setting the property value, you need to use a boolean value: either true or false. Properties must be set in JavaScript:
JavaScript
element.disabled = true;
In the scenario provided above, the issue arose from setting JavaScript properties as strings instead of using boolean values.
Consider these approaches for successful implementation:
//Any of the following work
element.readOnly = true; //Remember, it is readOnly, not readonly
element.disabled = true;
$("#id").attr("disabled", "disabled");
$("#id").attr("readonly", "readonly");
//You can also utilize jQuery's prop() method, although it may not be the best practice.
$("#id").prop("disabled", true);
$("#id").prop("readOnly", true);
$("#id").prop("readonly", true); //jQuery will automatically handle this for you.
It's crucial to recognize the distinction between disabled and readonly:
disabled: Prevents interaction with the element altogether, making it immutable and excluding it from form submissions.readonly: Simply restricts changes to the element's value.