Отключаем Select2
Чтобы при запуске Select2 был сразу отключен, либо используем для него параметр disabled: true, либо в сам тег selectдобавляем атрибут disabled='true':
Скопировано
<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>
<select>
<option>Первое значение</option>
<option>Второе значение</option>
<option>Третье значение</option>
</select>
<script>
jQuery( 'select' ).select2({
disabled: true,
// параметры ниже для красоты
width: 'auto',
minimumResultsForSearch: Infinity
});
</script>Если надо отключить Select2 после того, как он был создан, используем такой код:
Скопировано
$( 'select' ).prop( 'disabled', true ).trigger( 'change' );А чтобы включить такой:
Скопировано
$( 'select' ).prop( 'disabled', false ).trigger( 'change' );
Скопировано
<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>
<select disabled='true'>
<option>Первое значение</option>
<option>Второе значение</option>
<option>Третье значение</option>
</select>
<button id='on' style='margin: 50px 20px 0 0;'>включить</button>
<button id='off' style='margin: 50px 0 0;'>отключить</button>
<script>
jQuery(document).ready(function( $ ) {
$( 'select' ).select2({
// параметры ниже для красоты
width: '100%',
minimumResultsForSearch: Infinity
});
$(document).on( 'click', '#on', function() {
$( 'select' ).prop( 'disabled', false ).trigger( 'change' );
});
$(document).on( 'click', '#off', function() {
$( 'select' ).prop( 'disabled', true ).trigger( 'change' );
});
});
</script>