jquery - 在禁用模式下选择 2 下拉菜单

Question

我有以下问题:

Fiddle 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" />

虽然选择框被禁用，但如果在焦点位于选择框后按下空格键，下拉菜单仍然会弹出。

下面是js代码:

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

Answer 1

我认为 select2 jQuery 组件存在问题。因此，这里是一个采用解决方法来实现您的目标的代码片段:

$('#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" />

containerCssClass 选项用于定义用作 select2 容器的 jQuery 选择器的 css 类。

因此，向此容器添加 CSS 属性 pointer-events: none 就达到了目标。

注意使用select2.full版本(参见https://github.com/select2/select2/tree/master/dist/js)。

Fiddle updated.