CSS Select:disabled not working - css

Question

I have next function:
changeStateSelect() {
if ($('#idAsignaturaGlobal').prop('checked')) {
$('#idAsignatura').prop('disabled', true);
$('#idAsignatura').prop('required', false);
} else {
$('#idAsignatura').prop('disabled', false);
$('#idAsignatura').prop('required', true);
}
}
and next CSS:
.form-horizontal select:disabled {
cursor: not-allowed !important;
background-color: red !important;
border-color: red !important;
}
But it is not working. I tryed it adding it into the function with .css but neither... I do not understand why it happening this... Why could it be?. Thank you.
EDIT: This is my HTML code (Is React JS + Bootstrap)
<form role="form" class="form-horizontal text-center" method="GET" action="">
<fieldset class="scheduler-border">
<div class="form-group">
<label for="idAsignatura" class="control-label col-xs-12 col-sm-2 col-md-2 col-lg-2 label-select2">Asignatura: </label>
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
<select name="nAsignatura" id="idAsignatura" class="js-states form-control select2" required></select>
</div>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" name="nAsignaturaGlobal" id="idAsignaturaGlobal" onChange={this.changeStateSelect} value="true"/>
<label for="idAsignaturaGlobal">
Incidencia con la asignatura
</label>
</div>
</fieldset>
</form>

Answer 1

EDIT: I added your actual problem
Your problem is here:
<input type="checkbox" name="nAsignaturaGlobal" id="idAsignaturaGlobal" onChange={this.changeStateSelect} value="true"/>
You have onChange when it should be onchange="changeStateSelect()"
Demo
function changeStateSelect() {
if ($('#idAsignaturaGlobal').prop('checked')) {
$('#idAsignatura').prop('disabled', true);
$('#idAsignatura').prop('required', false);
} else {
$('#idAsignatura').prop('disabled', false);
$('#idAsignatura').prop('required', true);
}
}
.form-horizontal select:disabled {
cursor: not-allowed !important;
background-color: red !important;
border-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" class="form-horizontal text-center" method="GET" action="">
<fieldset class="scheduler-border">
<div class="form-group">
<label for="idAsignatura" class="control-label col-xs-12 col-sm-2 col-md-2 col-lg-2 label-select2">Asignatura: </label>
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
<select name="nAsignatura" id="idAsignatura" class="js-states form-control select2" required></select>
</div>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" name="nAsignaturaGlobal" id="idAsignaturaGlobal" onChange="changeStateSelect()" value="true"/>
<label for="idAsignaturaGlobal">
Incidencia con la asignatura
</label>
</div>
</fieldset>
</form>