How to apply readonly in a select?

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

• pointer-events: none - Disables ONLY mouse events on the element, any action taken with the mouse on the element will have no effect.

• touch-action: none - Disables touch actions on mobile devices, note that this is experimental technology with little 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% is assigned focus to input otherwise the value can be changed.

• aria-disabled="true" - For accessibility issues, 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

Firstly this is not an exact solution to your problem, it's just a form you can use, an alternative way so to speak.

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

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

No more talk, here's 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><formid="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 in case you want, you can put an option to activate the user's choice.

To add the toggle button, simply add <button id="enableselect">Enable</button> below select.

I saw the code in the Stack .

Another option is to use javascript pure. It is the least recommended and should only be used in the last and emergency resort because it works on the client side and can be bypassed using the preview element of the browser (although it does not ...) and it seems like a bug to the user.

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

Another way to avoid changing the value of select (without using CSS) is to set a onchange to the value of selected . It does not prevent you from opening 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>

For me, I would really disable the select, except that ... the value would be sent to an input hidden, and when I clicked on the submit form it would send the value of the input hidden, the only problem with this approach , or better, with the question in general is if the user regrets the choice and decides 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 the select: link

$('#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>