How to apply readonly in a select?

Asked

Viewed 39,339 times

36

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>

  • Does it not send any value when the field is disabled? You send this data via Ajax?

  • @Laerte exactly he even sends the name from select, it’s as if it didn’t even exist. Here I use ajax, but I didn’t intend to take content by js, or jquery.param

  • If you use jquery: you leave the select field enabled send the form c/ Selected value and only then use jquery to disable the field. using $( Document ).ready( ... )

  • 4

    Wouldn’t it be simpler to show a normal input text in this case? I usually only put select when the person can change the data. If it is readonly from the server, the job of changing a "readonly" or input type is the same. If you are going to use JS, it is the case that you only change the input type dynamically too.

  • 2

    I agree with @Bacco, if the user cannot change or view the other options, what is the need to use a select? If you want to show that this field may be edited in the future I think disabled would be the best option. Basically at this point you are deceiving the user as it will look like a combo box that is not working properly.

  • @lazyFox an even more elegant option than the most voted answer currently (which I disagree is a real solution) is by only one option with the desired value in the cases "readonly" kkkkkk

  • Exactly, no more XD

  • @Bacco that I remember (a long time ago), I wanted to do this for a form, registration, which was used tbm to edit, however in the creation the select was released, but in Edit not.

  • @Guilhermelautert I believe that a JS changing the type of input when entering the editing mode is still nicer than trying to "cover" the access to the field as proposed in some answers.

  • @Bacco I don’t disagree, but then we start to get into personal tastes, there goes each one. The good thing is to have options :D

  • @Guilhermelautert what worries me is to function without side effects, nor do I think it is taste. But I think you already got the idea, which thing after we detailed better in the chat to not lengthen too much here ;) - Someone of the most trusted users of the site gave a cool idea too (by other means), we would have to test the validity: put disabled in all options of select (less than desired) to simulate readonly.

  • If Voce will not use select for editing, display the content in an input text.

Show 7 more comments

4 answers

49


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)

  • 2

    Then just add the specific id because any select will be "disabled". + 1

  • 4

    The most interesting thing is not to rely on javascript +1

  • Simple but functional, I didn’t know this way ;) +1

  • What I call "elegant solution":D+1

  • 1

    @Pedrocamarajunior Perfectly. I can’t edit it and send normally.

  • 3

    It may be interesting to include a note that this property does not work in Internet Explorer and the user can change the value of select normally.

  • Edited @Renan. Thanks! Guilhermelautert take a look at the edit I made, I added a new property that is used for mobile/touch.

  • 1

    This is also legal: https://jsfiddle.net/gabrielr47/7tg8t4v5/

  • 3

    Remember that this does not prevent the user from using the keyboard to change the value of select. ;)

  • Truth @Caiofelipepereira. I had not seen this, it is possible to select the field using tab. I’ve already done some research, I think we can solve this problem using the tabindex="-1", thus, will not be accessible by the tab, but is there another way to access it?

  • @Pedrocamarajunior without mouse and keyboard enabled, I think not. I think.

  • Excellent response. + 1

  • +1 Good answer, but I still don’t understand the usefulness of this XD question

Show 8 more comments

5

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.

  • 1

    is an "elegant" solution, but answers the first topic. + 1

  • totally agree with the "nothing elegant" haha part

  • This is the gambis that I use, I had even created a question for this, basically works with any component disabled. http://answall.com/questions/99435/como-fazer-serialize-com-input-disable

  • I started to use it after discovering it in the OS, it is very useful and really, I prefer to use this one than otherwise for the simple reason of usability, I believe it is a cleaner way (in the client-side) since clearly you realize that the input ta disabled, some other modes do not show what a "bug" might look like as quoted in the reply

  • Inelegant solution and requires unnecessary maneuvers, is just perform the implementation with CSS as done in the answer above and do not receive the values and do not pass to the database or wherever will store the data.

4

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>

  • 1

    this is the example of intelligent programming against programming only. top!

0

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>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.