How to apply readonly in a select?

Question

I believe most of you here know the difference between readonly and disabled.

Select Readonly

The readonly does not apply properly to the select

<select name="field" readonly="readonly">
  <option value=""></option>
  <option value="1">Cliente</option>
  <option value="2">Contador</option>
  <option value="3">Vendedor</option>
</select>

As you can see I can still change the value of select

Select Disabled

What does not happen with the disabled that actually blocks select

<select name="field" disabled="disabled">
  <option value=""></option>
  <option value="1" selected>Cliente</option>
  <option value="2">Contador</option>
  <option value="3">Vendedor</option>
</select>

Here I can not edit, but it is also sent by the form.

Goal

I need to send the content of select by form, but the user can not edit it, its content is auto selected by other factors.

Doubt

• How to block the select, but still send its value by form?
• It would be possible without using js?

Addendum

This way I have what I want, but I would like a more elegant method, here he can still see the options.

<select name="field">
  <option value="" disabled="disabled"></option>
  <option value="1" disabled="disabled" selected>Cliente</option>
  <option value="2" disabled="disabled">Contador</option>
  <option value="3" disabled="disabled">Vendedor</option>
</select>

Answer 1

You can disable mouse, keyboard and touch events from select using only css, so the field will only have the appearance and behavior of disabled, but it will remain enabled.

• pointer-events: none - Disable the mouse-only events in the element, any action taken with the mouse over the element will have no effect.

• touch-action: none - Disable touch actions on mobile devices, note that this is an experimental technology with low compatibility yet.

• tabindex="-1" - As commented by @Caiofelipepereira, the value of input can still be changed with the keyboard. Using the tabindex negative, the field will not be accessible by tab, but if the focus at the input otherwise the value may be changed.

• aria-disabled="true" - For accessibility reasons, tell screen readers that your field is disabled.

select[readonly] {
  background: #eee; /*Simular campo inativo - Sugestão @GabrielRodrigues*/
  pointer-events: none;
  touch-action: none;
}

<select readonly="readonly" tabindex="-1" aria-disabled="true">
  <option value=""></option>
  <option value="1" selected>Cliente</option>
  <option value="2">Contador</option>
  <option value="3">Vendedor</option>
</select>

Compatibility - Pointer-Events

• Chrome: 2.0
• Firefox (Gecko): 3.6 (1.9.2)
• Internet Explorer: 11.0
• Opera: 15.0
• Safari (Webkit): 4.0 (530)

Compatibility - touch-action

• Chrome Mobile: Yes
• IE Mobile: Yes

Source: CSS Pointer Events - MDN - CSS Touch action - MDN (English)

Answer 2

First of all this is not an exact solution to your problem, it’s just a way you can use, an alternative way so to speak.

Okay, but why is? Simply because it is a "gambiarra" and uses the element disabled.

Basically what the code below does is hide a field input which will have the same value and name as the select.

Enough talk, here comes the demo.

$('#mainform').submit(function() {
  $('#formdata_container').show();
  $('#formdata').html($(this).serialize());
  return false;
});

$('#enableselect').click(function() {
  $('#mainform input[name=opcao]')
    .attr("disabled", true);

  $('#op-select')
    .attr('disabled', false)
    .attr('name', 'opcao');

  $('#enableselect').hide();
  return false;
});

#formdata_container {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <form id="mainform">
    <select id="op-select" disabled="true">
      <option value="op1" selected>Opção 1</option>
      <option value="op2">Opção 2</option>
      <option value="op3">Opção 3</option>
    </select>
    <input type="hidden" name="opcao" value="1" />

    <input type="submit" />
  </form>
</div>

<div id="formdata_container" style="display:none">
  <div>Dado enviado:</div>
  <div id="formdata">
  </div>
</div>

You can see in .js has the line of #enableselect, it is if you want, you can put an option to activate the user’s choice.

To add the button activate the choice just add <button id="enableselect">Enable</button> below the select.

I saw the code on Stack in English.

Another option is to use javascript pure. It is the least recommended and should only be used at last and emergency resort because it works on the client-side and can be bypassed using the function inspect element of the browser (although not...) besides looking like a bug for the user.

To see it working is just click here and see the jsfiddle demo.

Answer 3

Another way to avoid changing the value of select (without using CSS) is putting a onchange with the value of selected. Does not prevent to open the dropdown, but prevents the value from being changed:

<select name="field" onchange="this.value = '2'">
   <option value=""></option>
   <option value="1">Cliente</option>
   <option selected value="2">Contador</option>
   <option value="3">Vendedor</option>
</select>

Answer 4

by me I would actually disable the select, except that... the value would be sent to an Hidden input, and by clicking on the form’s Ubmit it sent the value of the Hidden input, the only problem with this approach, or rather with that of the general question is whether, the user repents of the choice and decide to change, then he would have to reload the page again, losing the data he has already filled in the other fields. in this case you would have to add an 'edit' button next to select: https://jsfiddle.net/fjzf15xa/

$('#example').on('change', function() {
var selectVal = $(this).val();
  
  $(this).attr({
'disabled': true,
'aria-disabled': true
  });
  $('#selectHidden').val(selectVal)
});

*,
 *::after,
 *::before {
  box-sizing: border-box;
 }

  .container {
max-width: 500px;
margin: 0 auto;
 }

.form__group {
  margin-bottom: 5px;
 }
  .form__input {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
 }

.button {
  border: 0;
  padding: 10px 15px;
  border-radius: 4px;
 }
  .button--primary {
background-color: #19B5FE;
color: #fff; }

  

<div class="container">
  <form action="" class="form">
<div class="form__group">
  <input type="text" class="form__input" value="Jhon Doe">
</div>
<div class="form__group">
  <select name="mydata" id="example" class="form__input">
    <option value="value1">value 1</option>
    <option value="value2">value 2</option>
    <option value="value3">value 3</option>
  </select>
  <input type="hidden" value="" id="selectHidden">
</div>
<button class="button button--primary">enviar</button>
  </form>
</div>