How make select2 readonly?

Question

I know that "readonly" feature does not exist for select2. Please check here. How do I achieve that? Any help would be appreciated. Thanks. Note: I cant use disabled. If I use disabled, I will not get the list of selected value.

Dextrorse

have you read the all thread? here is a solution jsfiddle.net/ujdbcy3d/14 – Interfluve

Answer 1

I guess that issue is resolved or may be available for higher version as this worked for me.

Please go through the example to make a select2 readonly here: Select 2

In js code:

$("select").select2("readonly", true);

You can put your own CSS like:

.select2-container.select2-container-disabled .select2-choice {
  background-color: #ddd;
  border-color: #a8a8a8;
}

Gunilla

For select2 v4 readonly solution: https://mcmap.net/q/419176/-select2-make-it-readonly-not-disabled-from-js – Millstone

Answer 2

$('.js-example-basic-single').select2({
  disabled: true
});

Render a disabled attribute after the page loads resolved for me.

A reminder, a field with the disabled attribute is not sent on forms

Infantryman

Answer 3

as the question says: How to make select2 readonly?, and as the user pointed out: the function "readonly" does not exist for select2. According to the select2 team developers: read this.

I just want to add a couple of things:

• disabled is not the same as readonly! be careful.
• $(element).select2({ disabled: true }); only works on versions prior to V4. In fact the answer marked as correct refers to V3.

Having said that, I want to share a simple suggestion:

• destroy the element and make it readonly. $(element).select2('destroy').attr("readonly", true)
• if you need it available again you can always call him again. $(element).select2()

tip:

• if you want it to look like the previous element, just remove the default css style: $(element).select2('destroy').attr("readonly", true).css({'-moz-appearance': 'none','-webkit-appearance': 'none'});

Terrellterrena

Simple and beautiful – Krohn

Answer 4

Try this:

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

EDIT:

For those using Select 2 version 4+, the new way to do it should be:

$("select").prop("disabled", true); // instead of $("select").enable(false);

After clarifying the question, this is the right way to do it:

$('select').select2().enable(false);

Winna

If is disabled, it will still be sent in the form data? guess not? – Floats

Answer 5

After few tests trying to block expanding/opening of the Select2 items, I've found the way to apply a listener on each natives select tags having Select2 attribute id... and detect on opening event if the native tag is readonly.

$('select[data-select2-id]').on('select2:opening', function (e) {
    if( $(this).attr('readonly') == 'readonly') { // Check if select tag is readonly.
        console.log( 'readonly, can't be open !' );
        e.preventDefault();
        $(this).select2('close'); 
        return false;
    }else{
        console.log( 'expandable/selectable' );
    }
});

For more custom on the Select2, we can add some CSS ...

select[readonly] ~ .select2.select2-container .selection [role="combobox"] {
    background: repeating-linear-gradient(
45deg
, #b4d2e4, #b4d2e4 10px, rgba(255, 255, 255, 0.15) 10px, rgba(255, 255, 255, 0.15) 20px) !important;
    box-shadow: inset 0 0 0px 1px rgba

jQuery(document).ready(function($) {

  // Implement Select2
  $( 'select' ).select2({
      placeholder: "Saisissez un mot pour aide à saisie",
      tags: true, // allow create new
      width: '100%'
  });

  // Just extra button to swap readonly
  $('#button_demo_2').off().on( 'click',function(e){
    console.log( $('#select_demo_2').attr('readonly') );
    if( typeof( $('#select_demo_2').attr('readonly') ) == 'undefined' ){
      $('#select_demo_2').attr('readonly','readonly');
    }else{
      $('#select_demo_2').removeAttr('readonly');
    }
  } );
  
  
  // Demo code...
  $('select[data-select2-id]').on('select2:opening', function (e) {
      if( $(this).attr('readonly') == 'readonly') {
          console.log( 'can not open : readonly' );
          e.preventDefault();
          $(this).select2('close');
          return false;
      }else{
          console.log( 'can be open : free' );
      }
  });


});

*{
  margin : 0;
  padding : 0;
}
body {
    height: 100vh;
    background-color: #215a82;
    font-family: 'Roboto',sans-serif;
    background: linear-gradient(180deg,#215a82 0%,#152135 100%) no-repeat;

    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
}
.container {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

div[role="box"]{
    padding:1rem;
    margin:2rem
    display: block;
}

pre {
    line-height: 1rem;
    height: 1.5rem;
    color: white;
}


select[readonly] ~ .select2.select2-container .selection [role="combobox"] {
    background: repeating-linear-gradient(45deg, #dadada, #dadada 10px, rgba(255, 255, 255, 0.66) 10px, rgba(255, 255, 255, 0.66) 20px) !important;
    box-shadow: inset 0 0 0px 1px #77859133;
}

input{
    display: block;
    padding: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>


<main class="container">

<div role="box">
  <pre></pre>
  <select class="form-control inputFocusable" id="select_base" name="select_base" tabindex="-1" aria-hidden="true">
    <option value="A">Item A</option>
    <option value="B">Item B</option>
    <option value="C">Item C</option>
  </select>
</div>

<div role="box">
  <pre>readonly</pre>
  <select class="form-control inputFocusable" id="select_demo_1" name="select_demo_1" tabindex="-1" aria-hidden="true" readonly>
    <option value="A">Item A</option>
    <option value="B">Item B</option>
    <option value="C">Item C</option>
  </select>
</div>

<div role="box">
  <pre>readonly="readonly"</pre>
  <select class="form-control inputFocusable" id="select_demo_2" name="select_demo_2" tabindex="-1" aria-hidden="true" readonly="readonly">
    <option value="A">Item A</option>
    <option value="B">Item B</option>
    <option value="C">Item C</option>
  </select>
</div>



</main>

<div role="box">
  <pre>readonly ?</pre>
  <input id="button_demo_2" type="button" value="Fix / Remove">
</div>

Lys

Answer 6

If you just want to make the select read-only, you should use

$('select').select2({
  readonly: true
});

Urine

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Cigarette

This does not work – Mikesell

Answer 7

you cannot make the select2 as readonly as per new version of select2,

follow the link for the css hack, it works like a charm

https://mcmap.net/q/419176/-select2-make-it-readonly-not-disabled-from-js

Plumate

Newer veersions should handle the readonly state... – Mikesell

Answer 8

Try this :

$(".example_element").css("pointer-events","none");

Dehydrogenase

This does not work – Mikesell

Answer 9

There workaround using select2 and standard select.

JS :

if (this.value == "") {
  $("#vessel").select2(); // initialize select2
  $("#vessel").val(""); //emptying value, optional
  $("#vessel").trigger("change"); // from select2 doc, you need notify any JS components that the value changed
} else {
  // check whether Select2 has been initialized on DOM element
  if ($("#vessel").hasClass("select2-hidden-accessible")) {
    $("#vessel").select2("destroy"); 
    // remove the Select2 widget from the target element. It will revert back to a standard control
  } 
  $("#vessel").val(this.value);
  $("#vessel").css("background-color", "#E9ECEF");
  $("#vessel").css("pointer-events", "none");
  $("#vessel").attr("tabIndex", -1);
  // 3 lines code above make select to readonly
}

I'm using CSS to make select to readonly. When this.value is empty, then <select> using select2 library and user can select option. Otherwise, select using standard select and user can't select option.

Godmother

Answer 10

$('#element_id').select2().readonly(true);

This can be define your element readonly and still send your POST data

Lunneta

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Cigarette