[jquery] How to make a dropdown readonly using jquery?

I am using the following statement to make it readonly but it is not working.

$('#cf_1268591').attr("readonly", "readonly"); 

I don't want make it disabled, I want to make it readonly.

I had the same problem, my solution was to disable all options not selected. Very easy with jQuery:

$('option:not(:selected)').attr('disabled', true);

Edit => If you have multiple dropdowns on same page, disable all not selected options on select-ID as below.

$('#select_field_id option:not(:selected)').attr('disabled', true);

This line makes selects with the readonly attribute read-only:

$('select[readonly=readonly] option:not(:selected)').prop('disabled', true);

You could also disable it and at the moment that you make the submit call enable it. I think is the easiest way :)

It is an old article, but i want to warn people who will find it. Be careful with disabled attribute with got element by name. Strange but it seems not too work.

this do not work:

<script language="JavaScript">
function onChangeFullpageCheckbox() {    
$('name=img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>

this work:

<script language="JavaScript">
function onChangeFullpageCheckbox() {    
$('#img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>

Yes, i know that i better should use prop and not attr, but at least now prop will not work because of old version of jquery, and now i cant update it, dont ask why... html difference is only added id: ...

<select name="img_size" class="dropDown" id="img_size">
<option value="200">200px
</option><option value="300">300px
</option><option value="400">400px
</option><option value="500">500px
</option><option value="600" selected="">600px
</option><option value="800">800px
</option><option value="900">900px
</option><option value="1024">1024px
</option></select>

<input type="checkbox" name="fullpage" id="fullpage" onChange="onChangeFullpageCheckbox()" />

...

I have not found any mistakes in the script, and in the version with name, there was no errors in console. But ofcourse it can be my mistake in code

Seen on: Chrome 26 on Win 7 Pro

Sorry for bad grammar.

To simplify things here's a jQuery plugin that does that without the hassle: https://github.com/haggen/readonly

Try this one.. without disabling the selected value..

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

It works for me..

html5 supporting :

`
     $("#cCity").attr("disabled", "disabled"); 
     $("#cCity").addClass('not-allow');

`

It´s work very well

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

With this I can see the options but I can't select it

Try to make empty string when "keypress up"

The Html is:

<input id="cf_1268591" style="width:60px;line-height:16px;border:1px solid #ccc">

The Jquery is:

$("#cf_1268591").combobox({
  url:"your url",
  valueField:"id",
  textField:"text",
  panelWidth: "350",
  panelHeight: "200",
});

// make after keyup with empty string

var tb = $("#cf_1268591").combobox("textbox");
  tb.bind("keyup",function(e){
  this.value = "";
});

Simple jquery to remove not selected options.

$('#your_dropdown_id option:not(:selected)').remove();

Easiest option for me was to make select as readonly and add:

onmousedown="return false" onkeydown="return false"

You don't need to write any extra logic. No hidden inputs or disabled and then re-enabled on form submit.

Here is a slight variation on the other answers that suggest using disabled. Since the "disabled" attribute can actually have any value and still disable, you can set it to readonly, like disabled="readonly". This will disable the control as usual, and will also allow you to easily style it differently than regular disabled controls, with CSS like:

select[disabled=readonly] {
    .... styles you like for read-only
}

If you want data to be included submit, use hidden fields or enable before submit, as detailed in the other answers.

This code will first store the original selection on each dropdown. Then if the user changes the selection it will reset the dropdown to its original selection.

http://jsfiddle.net/4aHcD/22/

//store the original selection
$("select :selected").each(function(){
    $(this).parent().data("default", this);
});

//change the selction back to the original
$("select").change(function(e) {
    $($(this).data("default")).prop("selected", true);
});

I've found, a better way to do this is to use CSS to remove pointer-events and modify the opacity on the drop down (try 0.5). This gives the appearance to the user that it is disabled as normal, but still posts data.

Granted this has some issues with backwards compatibility, but is in my opinion a better option than getting around the annoying disabled/readonly issue.

Setting an element with disabled will not submit the data, however select elements don't have readonly.

You can simulate a readonly on select using CSS for styling and JS to prevent change with tab:

select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

Then use it like:

var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
    $(i.target).val($(this).attr('data-original-value'));
});

Result:

  // Updated 08/2018 to prevent changing value with tab_x000D_
$('a').on('click', function() {_x000D_
var readonly_select = $('select');_x000D_
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {_x000D_
 $(i.target).val($(this).attr('data-original-value'));_x000D_
});_x000D_
});

select[readonly] {_x000D_
  background: #eee;_x000D_
  pointer-events: none;_x000D_
  touch-action: none;_x000D_
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<a href="#">Click here to enable readonly</a>_x000D_
<select>_x000D_
<option>Example 1</option>_x000D_
<option selected>Example 2</option>_x000D_
<option>Example 3</option>_x000D_
</select>

As @Kanishka said , if we disable a form element it will not be submitted . I have created a snippet for this problem . When the select element is disabled it creates a hidden input field and store the value . When it is enabled it delete the created hidden input fields .

More info

jQuery(document).ready(function($) {_x000D_
  var $dropDown = $('#my-select'),_x000D_
    name = $dropDown.prop('name'),_x000D_
    $form = $dropDown.parent('form');_x000D_
_x000D_
  $dropDown.data('original-name', name); //store the name in the data attribute _x000D_
_x000D_
  $('#toggle').on('click', function(event) {_x000D_
    if ($dropDown.is('.disabled')) {_x000D_
      //enable it _x000D_
      $form.find('input[type="hidden"][name=' + name + ']').remove(); // remove the hidden fields if any_x000D_
      $dropDown.removeClass('disabled') //remove disable class _x000D_
        .prop({_x000D_
          name: name,_x000D_
          disabled: false_x000D_
        }); //restore the name and enable _x000D_
    } else {_x000D_
      //disable it _x000D_
      var $hiddenInput = $('<input/>', {_x000D_
        type: 'hidden',_x000D_
        name: name,_x000D_
        value: $dropDown.val()_x000D_
      });_x000D_
      $form.append($hiddenInput); //append the hidden field with same name and value from the dropdown field _x000D_
      $dropDown.addClass('disabled') //disable class_x000D_
        .prop({_x000D_
          'name': name + "_1",_x000D_
          disabled: true_x000D_
        }); //change name and disbale _x000D_
    }_x000D_
  });_x000D_
});

/*Optional*/_x000D_
_x000D_
select.disabled {_x000D_
  color: graytext;_x000D_
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<form action="#" name="my-form">_x000D_
  <select id="my-select" name="alpha">_x000D_
    <option value="A">A</option>_x000D_
    <option value="B">B</option>_x000D_
    <option value="C">C</option>_x000D_
  </select>_x000D_
</form>_x000D_
<br/>_x000D_
<button id="toggle">toggle enable/disable</button>

I'd make the field disabled. Then, when the form submits, make it not disabled. In my opinion, this is easier than having to deal with hidden fields.

//disable the field
$("#myFieldID").prop( "disabled", true );           

//right before the form submits, we re-enable the fields, to make them submit.
$( "#myFormID" ).submit(function( event ) {
    $("#myFieldID").prop( "disabled", false );
});     

Maybe you can try this way

function myFunction()
{
   $("select[id^=myID]").attr("disabled", true);
   var txtSelect = $("select[id^=myID] option[selected]").text();
}

This sets the first value of the drop-down as the default and it seems readonly

There is no such thing as a read-only drop-down. What you could do is reset it to the first value manually after each change.

$("select").change(function(event) {
    $(this).val($(this).find("option").first().val());
});

http://jsfiddle.net/4aHcD/

This is what you are looking for:

$('#cf_1268591').attr("style", "pointer-events: none;");

Works like a charm.