Enable or disable select options based on user clicks.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<select id="test" multiple style="width:250px"></select>
<select id="test-optgroups" multiple style="width:250px"></select>
<button id="disable">Disable</button>
<button id="enable">Enable</button>
JavaScript
var data = [
{
"id": 1,
"text": "Option 1"
},
{
"id": 2,
"text": "Option 2",
},
{
"id": 3,
"text": "Option 3",
}
];
var dataOptGroups = [
{
"text": "Group 1",
"children" : [
{
"id": 1,
"text": "Option 1"
},
{
"id": 2,
"text": "Option 2",
}
]
},
{
"text": "Group 2",
"children" : [
{
"id": 3,
"text": "Option 3",
}
]
}
];
$('#test').select2({'data': data});
$('#test-optgroups').select2({'data': dataOptGroups});
$('#disable').on('click', function(e){
$('option[value="2"]').each(function(idx, element){
$(element).prop('disabled',true);
});
});
$('#enable').on('click', function(e){
$('option[value="2"]').each(function(idx, element){
$(element).prop('disabled',false);
});
});