CODEWITHSUNDEEP
jquery
Karim Ali
Karim Ali

Reputation: 2453

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.

Upvotes: 119

Views: 373151

Answers (24)

Michael Williams
Michael Williams

Reputation: 1

$("select[id='name_a1234dc4-1234-12a7-b..._DropDownChoice']").prop('disabled',true).att("style","pointer-events:none;");

Upvotes: 0

Merrin K
Merrin K

Reputation: 1790

Try This

$('#Dropdown').attr('readonly', true);
$('#Dropdown').css('pointer-events','none');

Upvotes: 0

DreK
DreK

Reputation: 31

I know this is an old topic, but I thought I would respond for anyone else wanting to make a select field read-only, not disabled.

Select field can't have a read-only attribute. The best way I found was using a CSS.

This will make the select field act as if its read-only, while still submitting the value.

To make a field act as read-only:

$("#FieldId").css({"pointer-events": "none", "touch-action": "none", "background": "#ede6e6"});

To make a field actionable:

$("#FieldId").css({"pointer-events": "auto", "touch-action": "auto", "background": "#ffffff"});

I also use this if I have a form with multiple fields that need to be made read-only based on access level, by declaring it in a variable. E.G PHP

if($UserAccess == "Limited"){
$ReadOnlyFields = "style='pointer-events:none;touch-action:none;background:#ede6e6;'";
}

<select name='TheField' <?php if(!empty($ReadOnlyFields)){echo $ReadOnlyFields;} ?>>

Upvotes: 3

Bertrand D.
Bertrand D.

Reputation: 1741

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);

Upvotes: 174

Amiya
Amiya

Reputation: 41

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($) {
  var $dropDown = $('#my-select'),
    name = $dropDown.prop('name'),
    $form = $dropDown.parent('form');

  $dropDown.data('original-name', name); //store the name in the data attribute 

  $('#toggle').on('click', function(event) {
    if ($dropDown.is('.disabled')) {
      //enable it 
      $form.find('input[type="hidden"][name=' + name + ']').remove(); // remove the hidden fields if any
      $dropDown.removeClass('disabled') //remove disable class 
        .prop({
          name: name,
          disabled: false
        }); //restore the name and enable 
    } else {
      //disable it 
      var $hiddenInput = $('<input/>', {
        type: 'hidden',
        name: name,
        value: $dropDown.val()
      });
      $form.append($hiddenInput); //append the hidden field with same name and value from the dropdown field 
      $dropDown.addClass('disabled') //disable class
        .prop({
          'name': name + "_1",
          disabled: true
        }); //change name and disbale 
    }
  });
});
/*Optional*/

select.disabled {
  color: graytext;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="#" name="my-form">
  <select id="my-select" name="alpha">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</form>
<br/>
<button id="toggle">toggle enable/disable</button>

Upvotes: 1

DaveInMaine
DaveInMaine

Reputation: 917

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.

Upvotes: 0

abhi chavda
abhi chavda

Reputation: 173

Simple jquery to remove not selected options.

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

Upvotes: 15

Atul Kumar
Atul Kumar

Reputation: 334

html5 supporting : 

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

`

Upvotes: 0

Awais Tariq
Awais Tariq

Reputation: 7754

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.

Upvotes: 3

Lucas Bustamante
Lucas Bustamante

Reputation: 17198

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
$('a').on('click', function() {
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'));
});
});
select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click here to enable readonly</a>
<select>
<option>Example 1</option>
<option selected>Example 2</option>
<option>Example 3</option>
</select>

Upvotes: 15

Monicalh
Monicalh

Reputation: 101

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

Upvotes: 0

Ricardo Mendes
Ricardo Mendes

Reputation: 31

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

Upvotes: 3

Prabhagaran
Prabhagaran

Reputation: 3700

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

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

It works for me..

Upvotes: 26

mainak chakraborty
mainak chakraborty

Reputation: 664

This is what you are looking for:

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

Works like a charm.

Upvotes: 38

Hictus
Hictus

Reputation: 220

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

Upvotes: 1

NL3294
NL3294

Reputation: 1514

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 );
});

Upvotes: 16

Hendro
Hendro

Reputation: 1

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 = "";
});

Upvotes: 0

admirhodzic
admirhodzic

Reputation: 69

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

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

Upvotes: 3

Arthur Corenzan
Arthur Corenzan

Reputation: 911

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

Upvotes: 7

user3427526
user3427526

Reputation: 11

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.

Upvotes: 1

Andrej
Andrej

Reputation: 49

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.

Upvotes: 1

Homer
Homer

Reputation: 7806

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);
});

Upvotes: 2

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17576

$('#cf_1268591').attr("disabled", true);

drop down is always read only . what you can do is make it disabled

if you work with a form , the disabled fields does not submit , so use a hidden field to store disabled dropdown value

Upvotes: 218

Alex Turpin
Alex Turpin

Reputation: 47776

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/

Upvotes: 0

Related Questions