Select2 - make it readonly (not disabled!) from js

Question

How can I dynamically make a select2 combobox read-only?

Here\'s what I\'ve tried so far:

$(\'...\').attr({\'reado         


        

Answer 1

Solution from Select2 - Issue #3387 - Readonly Support:

select[readonly].select2 + .select2-container {
  pointer-events: none;
  touch-action: none;

  .select2-selection {
    background: #eee;
    box-shadow: none;
  }

  .select2-selection__arrow,
  .select2-selection__clear {
    display: none;
  }
}

Edit: for versions > 4.07 - as commenters below correctly pointed out:

select[readonly].select2-hidden-accessible + .select2-container {
    pointer-events: none;
    touch-action: none;

    .select2-selection {
        background: #eee;
        box-shadow: none;
    }

    .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
        display: none;
    }
}

Answer 2

This is Solution for Latest select2 (Tested With 4.0.7) using css only

/*Select2 ReadOnly Start*/
    select[readonly].select2-hidden-accessible + .select2-container {
        pointer-events: none;
        touch-action: none;
    }

    select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
        background: #eee;
        box-shadow: none;
    }

    select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
        display: none;
    }

/*Select2 ReadOnly End*/

Answer 3

This works for me: .select2("readonly", true); .select2("readonly", false);

Answer 4

See: http://select2.github.io/select2/

I did it with:

$("#modelname-fieldname").select2({disabled:readonly});

Where:

• modelname-fieldname is as in: $form -> field($modelname, "fieldname") -> widget(Select2::classname(), [ ... ]);
• readonly is true, false or a string readonly

Optionally you can change the cursor when hovering over the select2 field.

Answer 5

I'm working with Select 4.0 and this works well for me

$('#select2-element').on('select2:select', () => {
  $('#select2-element').data('select2').destroy();
  $('#select2-element').attr('readonly', true);
});