Html form readonly SELECT tag/input

Augmenting Dropdown Behaviour

Applying the disabled attribute on a select tag transforms it into a static dropdown. However, to ensure that the value is transmitted during form submission, sync the select's value with a hidden input field. Here, JavaScript event handlers are instrumental in updating the hidden input's value to mirror the select just before form submission.

// "I'm all ears!" says our event listener.
document.querySelector('select').addEventListener('change', function() {
  // Our secret agent going undercover as a hidden input
  document.querySelector('input[type="hidden"]').value = this.value;
});


By employing jQuery's .serialize() function, form data, including hidden inputs, can be collected effectively, thus ensuring all pertinent data is submitted.

// "I solemnly swear I'm up to no good!" says our Marauder's map, .serialize(). 
$('#yourForm').submit(function() {
  console.log($(this).serialize());
});


Enhance user interaction by utilizing CSS rules. Rules such as display: none bolster security and pare down visual clutter by hiding undesired options.

Crafting a readonly look and feel

A select dropdown can be made to resemble a readonly input field, by enforcing the disabled attribute on unnecessary <option> tags. The preferred option remains active and selectable.

<select>
  <option value="selectedValue" selected>Coveted Option</option>
  <option value="unwantedValue" disabled>Unwelcome Option</option>
</select>


To supplement this, apply CSS pointer-events: none; to make all parts of select disengage from user interactions, thus emulating readonly.

select[readonly] {
  pointer-events: none;
}


Before submitting, be sure to toggle off the 'disabled' state back to enabled using jQuery's prop method if necessary.

Emulating readonly with CSS and jQuery

Readonly enforcement with CSS

For circumstances requiring value preservation for submission, a straight disabled attribute falls short. Select groups and options can be made unselectable using fine-tuned CSS rules, producing a readonly mimicry.

select[readonly] option:not(:selected) {
  display: none; // Playing a game of hide and seek with the unselected options. 🙈
}


Dynamically tweaking form elements with jQuery

jQuery shines in adapting form elements on-demand. By modifying attributes like disabled or name based on certain conditions or actions.

$('#selection').change(function() {
  if (/* some condition */) {
    $(this).prop('disabled', true); // Subtly telling the element, "You need a break!"
  } else {
    $(this).prop('disabled', false); // "Alright, break's over!"
  }
  // Also, a chance for a new identity with a different 'name'.
});


Rendering select tag options readonly

To maintain some fields unaltered and visible, a custom CSS rule comes in handy:

$('#selection').css('pointer-events', 'none'); // Child lock for your HTML select


Mind the accessibility

Consider equipping your readonly or disabled patterns with accessibility features. This ensures assistive technologies accurately convey the status of the form elements.

select[disabled] {
  opacity: 0.5; // A touch of transparency to show it's off limits
}
