Jquery不适用于模态Bootstrap

时间:2018-03-09 14:03:54

标签: jquery html bootstrap-modal

您好我尝试根据选择值启用/禁用输入,所有这些都是模态的,但它似乎无法正常工作。

我的想法是,如果我的estado_rx是Cerrado并且我选择了Abierto,那么Fecha Apertura的输入和Responsable的选择应该启用,否则它们应该被禁用。

当我的estado_rx是Abierto或Alicuota且我选择Agotado时非常相似,Fecha Agotado的输入应该启用,否则它应该被禁用。

这是我的代码:

<div class="modal fade modal-slide-in-right" aria-hiden="true" role="dialog" tabindex="-1" id="modal-status-{{$rx->id_rx}}">

    {!!Form::model($rx,['method'=>'PUT','route'=>['reactivos.update',$rx->id_rx]])!!}
    {{Form::token()}}

<?php

$usuarios=DB::table('users')->get();

?>

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Cambiar estado de reactivo</h4>
            </div>
            <div class="modal-body">
                <p>¿Desea cambiar el estado del reactivo: <b>{{ $rx->nom_rx }}</b>?</p>

                <div class="form-group">
                    <label for="estado_rx" class="col-md-12" control-label"><b>Estado</b></label>
                    <select name="estado_rx" class="form-control" required id="staterx">
                        @if ($rx->estado_rx=='Cerrado')
                        <option value="Abierto">Abierto</option>
                        <option value="Cerrado" selected>Cerrado</option>
                        @elseif ($rx->estado_rx=='Abierto')
                        <option value="Abierto" selected>Abierto</option>
                        <option value="Agotado">Agotado</option>
                        @elseif ($rx->estado_rx=='Alícuota')
                        <option value="Alícuota" selected>Alícuota</option>
                        <option value="Agotado">Agotado</option>
                        @endif
                    </select>
                </div>

                @if ($rx->estado_rx=='Cerrado')
                <div class="form-group">
                    <label class="form-label" for="fecha_aper"><b>Fecha Apertura</b></label>
                    <input type="text" class="form-control datepicker-only-init" name="fecha_aper" id="f_aper" disabled/>
                </div>

                <div class="form-group">
                    <label class="form-label" for="responsable_rx"><b>Responsable</b></label>
                    <select name="responsable_rx" class="form-control" id="responsable" disabled>
                        <option value="" selected> </option>
                        @foreach ($usuarios as $user)
                            <option value="{{$user->name}}">{{$user->name}}</option>
                        @endforeach
                    </select>
                </div>
                @endif

                @if (($rx->estado_rx=='Abierto')||($rx->estado_rx=='Alícuota'))
                <div class="form-group">
                    <label class="form-label" for="fecha_agotado"><b>Fecha en que se agotó</b></label>
                    <input type="text" class="form-control datepicker-only-init" name="fecha_agotado" id="f_ago"/>
                </div>
                @endif

            </div>
            <div class="modal-footer">
                <div class="form-group">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">Aceptar</button>
                </div>

            </div>
        </div>
    </div>

    {{Form::Close()}}


</div>

<script type="text/javascript">
    $('#staterx').change(function() {
    if( $(this).val() == 'Agotado') {
        $('#f_ago').prop( "disabled", false );
    } else {       
        $('#f_ago').prop( "disabled", true );
    }
});
</script>

如何使用Jquery函数在模态中执行此操作?感谢

0 个答案:

没有答案