CODEWITHSUNDEEP
css
JuMoGar
JuMoGar

Reputation: 1760

CSS Select:disabled not working

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>

Upvotes: 0

Views: 126

Answers (1)

jeremye
jeremye

Reputation: 1388

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>

Upvotes: 1

Related Questions