Emulating Readonly Behavior for HTML Select Elements

Introduction

HTML <select> elements don’t natively support a readonly attribute. While the disabled attribute prevents user interaction, it also prevents the selected value from being submitted with the form. This can be problematic when you want to display a pre-selected option to the user but still include its value in the form data. This tutorial explores several techniques to emulate readonly behavior for <select> elements while ensuring the selected value is submitted with the form.

The Problem: disabled vs. readonly

The disabled attribute effectively greys out the <select> element, preventing the user from changing the selection. However, disabled form elements are not included in the POST or GET request when the form is submitted. A true readonly state would visually indicate that the selection is fixed, but still transmit the selected value upon submission. Since HTML doesn’t provide a direct equivalent, we need to implement workarounds.

Solutions

Here are several techniques to achieve the desired effect:

1. Hidden Input with Serialized Value

This is a common and reliable approach. The idea is to pair the <select> element with a hidden input field.

1. Disable the <select>: Initially, disable the <select> element using the disabled attribute.
2. Add a Hidden Input: Add a hidden <input type="hidden"> element with the same name as the <select> element and pre-populate its value with the desired default value.
3. JavaScript Enhancement (Optional): If you allow the user to temporarily enable the select, use JavaScript to update the hidden input’s value whenever the selection changes.

Example:

<form id="mainform">
  <select id="animal-select" disabled="true">
    <option value="cat" selected>Cat</option>
    <option value="dog">Dog</option>
    <option value="hamster">Hamster</option>
  </select>
  <input type="hidden" name="animal" value="cat"/>
  <button id="enableselect">Enable</button>
  <input type="submit"/>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $('#enableselect').click(function() {
    $('#animal-select').attr('disabled', false);
  });
</script>

This ensures that even when the <select> is disabled, the selected value ("cat" in this example) is submitted through the hidden input.

2. Disabling All Options Except the Selected One

A simpler approach is to disable all <option> elements except the currently selected one. This visually prevents the user from changing the selection, and the value is submitted as usual when the form is submitted.

Example:

<select>
  <option disabled>1</option>
  <option selected>2</option>
  <option disabled>3</option>
</select>

This approach is concise but relies on the fact that the server-side code handles cases where the user might attempt to tamper with the HTML to remove the disabled attribute.

3. Re-Enabling on Submit

You can initially disable the <select> element and then re-enable it just before the form is submitted. This allows the value to be included in the submitted data.

Example (using jQuery):

$('#yourForm').on('submit', function() {
  $('#yourSelect').prop('disabled', false);
});

This solution is relatively straightforward but requires JavaScript and relies on the form’s submit event being handled correctly.

4. CSS-Based Approach (pointer-events)

You can use CSS to prevent the user from interacting with the <select> element by setting pointer-events: none;.

Example:

#selection {
  pointer-events: none;
}

This makes the select element visually appear enabled but prevents clicks or other interactions. The form value will be submitted as expected.

5. CSS-Based Approach (Hiding Options)

This solution involves hiding all options except the selected one via CSS.

select[readonly] option, select[readonly] optgroup {
  display: none;
}

This is a clean, JavaScript-free solution, provided you can add a readonly class or attribute to the select element. It effectively prevents user interaction and maintains form submission.

Choosing the Right Approach

The best approach depends on your specific requirements:

• For maximum compatibility and reliability, the hidden input method is often the most robust.
• If you want a minimal solution and can guarantee the integrity of your HTML, disabling all options except the selected one is a good choice.
• If you are already using jQuery and want a simple JavaScript solution, re-enabling on submit is viable.
• If you prefer a CSS-only solution, the pointer-events or hiding options approaches can be used.