Highlight Select2 in disabled mode

Question

I have the following problem:

Script Link

<select id="select2" style="width:250px">
  <option value=""></option>
  <option value="option 1">Option 1</option>
  <option value="option 2">Option 2</option>
  <option value="option 3">Option 3</option>
</select>

<input id="disableBtn" type="button" value="Disable" />

<input id="enableBtn" type="button" value="Enable" />

While the selection flag is disabled, the dropout still pops up if a space falls after focusing on the selection field.

Below is the js code:

$('#select2').select2({placeholder: 'Select an option',minimumResultsForSearch: 'Infinity'});
$('#disableBtn').on('click', () => {$('#select2').attr('disabled', 'true');});
$('#enableBtn').on('click', () => {$('#select2').removeAttr('disabled');});

Answer 1

I think there is a problem with the jQuery select2 component . So, here is a snippet that uses a workaround to achieve your goal:

$('#myselect').select2({
  containerCssClass: 'mysel-con',
  placeholder: 'Select an option',
  minimumResultsForSearch: 'Infinity'
});

$('#disableBtn').on('click', ()=>{
  $('#myselect').select2('enable', false);
  $('.mysel-con').css('pointer-events', 'none');
});

$('#enableBtn').on('click', ()=>{
  $('#myselect').select2('enable');
  $('.mysel-con').css('pointer-events', '');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.full.min.js"></script>

<select id="myselect" style="width:250px">
  <option value=""></option>
  <option value="option 1">Option 1</option>
  <option value="option 2">Option 2</option>
  <option value="option 3">Option 3</option>
</select>

<input id="disableBtn" type="button" value="Disable" />

<input id="enableBtn" type="button" value="Enable" />

Run codeHide result

Option

containerCssClass used to define the css class used as a jQuery selector for the select2 container.

Thus, adding a CSS property pointer-events: noneto this container is achieved.

select2.full (. https://github.com/select2/select2/tree/master/dist/js).

.