im trying to do a jquery select option, if the select value it is not equal to three then disable the button, and if it is three, enable it but my problem it is that if i put an option like the commented in my code (Seleccionar Turno-->), it is not taking the changes, how i can improve my code?

HTML

<form role="form" id="formcaja" name="formcaja" method="post" action="" onsubmit="return revisadatos()" >
                    <div class="card-body">
                        <div class="form-group">
                          <label for="fecha_cierre" class="control-label col-sm-6">Fecha de Cierre</label>
                          <input id="fecha_cierre" name="fecha_cierre" type="text" value="<?php echo date("d/m/Y H:i:s"); ?>"  style=" width:350px" readonly="readonly" >
                          <label for="turno" class="control-label col-sm-6">Caja</label>
                          <input id="cajaID" name="cajaID" type="text" value="<?php echo $data3["id"]; ?>"  style=" width:350px" readonly="readonly" >
                        </div>
                        <div class="form-group">
                            <label for="monto_cierre" class="control-label col-sm-6">Monto Actual</label>
                                  <div class="input-group  mb-3"style=" width: 30%">
                                      <div class="input-group-prepend">
                                        <span class="input-group-text" id="inputGroup-sizing-sm">$</span>
                                      </div>
                                      <input name="monto_cierre" id="monto_cierre" type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" value="<?php echo number_format($data["gtotal"], 2);?>" readonly="readonly"/>    
                                  </div>
                        </div>
                        <div class="form-group">
                            <label>Turno a Cerrar</label>
                            <div class="col-xs-2">
                                <select class="form-control" name="turnoID" id="turnoID">
                                    <!--<option>Seleccionar Turno</option>-->
                                    <?php
                                    while ($row = mysqli_fetch_array($resb)) {
                                        echo "<option value='".$row['id']."'>".$row['desc_turno']."</option>";
                                    }
                                    ?>
                                </select>
                            </div>
                        </div>
                        <label for="usuarioID" class="control-label col-sm-2">Elaboró</label>
                                <div class="col-sm-4">
                                    <input name="usuarioID" id="usuarioID" type="text" class="form-control" placeholder="Elaboró" value="<?php echo $_SESSION['username']; ?>" readonly />
                                </div>  
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                      <button type="submit" class="btn btn-primary" value="turno">Cerrar Turno</button>
                      <button type="submit" class="btn btn-danger" value="cierre" id="cierrecaja">Cerrar Caja</button>
                    </div>
                  </form>

JS

$(document).ready(function(){
    var opcion = $("#turnoID").val();
    console.log(opcion) //This is for see in the console what it is happening
    if (opcion != "3") {
        $("#cierrecaja").attr('disabled','disabled')
    }
    $("#turnoID").change(function () {
        if ($(this).val() != "3") {
            $("#cierrecaja").attr('disabled','disabled')
        } else {
            $("#cierrecaja").attr('enabled','enabled')
        }
    });    
});

CodePudding user response：

Try with the below code(JS) removeAttr("disabled"); insted of enabled

$(document).ready(function(){
    var opcion = $("#turnoID").val();
    console.log(opcion) //This is for see in the console what it is happening
    if (opcion != "3") {
        $("#cierrecaja").attr('disabled','disabled')
    }
    $("#turnoID").change(function () {
        if ($(this).val() != "3") {
            $("#cierrecaja").attr('disabled','disabled')
        } else {
            $("#cierrecaja").removeAttr("disabled");
        }
    });    
});