How to make a dropdown readonly using jquery?

Question

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

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

I don\

Answer 1

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

Click here to enable readonly

Example 1
Example 2
Example 3