JSFiddle - React, Tailwind, and code Playground
HTML
<label>Select the priority level of the task: </label>
<select id="taskPriority" name="priority[]" multiple="multiple">
<option value="lowImp">Low Importance</option>
<option value="highImp">High Importance</option>
<option value="lowUrg">Low Urgency</option>
<option value="highUrg">High Urgency</option>
</select>
<br />
<br />
JavaScript
$(document).ready(function () {
$('#taskPriority').on('change', function () {
var theval = $(this).val();
console.log(theval);
if (jQuery.inArray('lowImp',theval) > -1) {
$('#taskPriority').find('option[value=highImp]').prop('disabled', true);
}
if (jQuery.inArray('highImp',theval) > -1) {
$('#taskPriority').find('option[value=lowImp]').prop('disabled', true);
}
if (jQuery.inArray('lowUrg',theval) > -1) {
$('#taskPriority').find('option[value=highUrg]').prop('disabled', true);
}
if (jQuery.inArray('highUrg',theval) > -1) {
$('#taskPriority').find('option[value=lowUrg]').prop('disabled', true);
}
if(jQuery.inArray('lowImp',theval) == -1){
$('#taskPriority').find('option[value=highImp]').prop('disabled',false);
}
if(jQuery.inArray('highImp',theval) == -1){
$('#taskPriority').find('option[value=lowImp]').prop('disabled',false);
}
if(jQuery.inArray('lowUrg',theval) == -1){
$('#taskPriority').find('option[value=highUrg]').prop('disabled',false);
}
if(jQuery.inArray('highUrg',theval) == -1){
$('#taskPriority').find('option[value=lowUrg]').prop('disabled',false);
}
});
});