Laravel 8 如何显示和隐藏或变灰 Div 当另一个 Div 外键的下拉选择值来自不同 table

Question

我想根据另一个 Div 下拉列表 selection 显示和隐藏或变灰文本表单，而这个下拉列表 selection 是来自不同 [=31= 的外键元素].

attendance_type table will have AB \ PR values respectively

这是我的下拉菜单blade代码

<div class="form-group">
                <label for="attendance_type_id">{{ trans('cruds.attendance.fields.attendance_type') }}</label>
                <select class="form-control select2 {{ $errors->has('attendance_type') ? 'is-invalid' : '' }}" name="attendance_type_id" id="attendance_type_id">
                    @foreach($attendance_types as $id => $entry)
                        <option value="{{ $id }}" {{ old('attendance_type_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                    @endforeach
                </select>
                @if($errors->has('attendance_type'))
                    <div class="invalid-feedback">
                        {{ $errors->first('attendance_type') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.attendance.fields.attendance_type_helper') }}</span>
            </div>

当我 select AB 值 select 编辑时，应显示以下内容或将其从编辑中变灰，如果 select 来自 attendance_type [=31 的 PR 值=] 应显示以下 div 代码！

<div class="form-group">
                <label for="in_time">{{ trans('cruds.attendance.fields.in_time') }}</label>
                <input class="form-control timepicker {{ $errors->has('in_time') ? 'is-invalid' : '' }}" type="text" name="in_time" id="in_time" value="{{ old('in_time') }}">
                @if($errors->has('in_time'))
                    <div class="invalid-feedback">
                        {{ $errors->first('in_time') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.attendance.fields.in_time_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="out_time">{{ trans('cruds.attendance.fields.out_time') }}</label>
                <input class="form-control timepicker {{ $errors->has('out_time') ? 'is-invalid' : '' }}" type="text" name="out_time" id="out_time" value="{{ old('out_time') }}">
                @if($errors->has('out_time'))
                    <div class="invalid-feedback">
                        {{ $errors->first('out_time') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.attendance.fields.out_time_helper') }}</span>
            </div>

Answer 1

我的Blade代码

<div class="form-group" id="InTime_dis">
                <label for="in_time">{{ trans('cruds.attendance.fields.in_time') }}</label>
                <input class="form-control timepicker {{ $errors->has('in_time') ? 'is-invalid' : '' }}" type="text" name="in_time" id="in_time" value="{{ old('in_time') }}">
                @if($errors->has('in_time'))
                    <div class="invalid-feedback">
                        {{ $errors->first('in_time') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.attendance.fields.in_time_helper') }}</span>
            </div>
            <div class="form-group" id="OutTime_dis">
                <label for="out_time">{{ trans('cruds.attendance.fields.out_time') }}</label>
                <input class="form-control timepicker {{ $errors->has('out_time') ? 'is-invalid' : '' }}" type="text" name="out_time" id="out_time" value="{{ old('out_time') }}">
                @if($errors->has('out_time'))
                    <div class="invalid-feedback">
                        {{ $errors->first('out_time') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.attendance.fields.out_time_helper') }}</span>
            </div>

我的 JsScript 代码

<script>
$(document).ready(function(){
  $('#attendance_type_id').on('change', function() {
    if ( this.value == '2')
    {
      $("#InTime_dis").show();
      $("#OutTime_dis").show();
    }
    else
    {
      $("#InTime_dis").hide();
      $("#OutTime_dis").hide();
     }
  });
});

</script>

希望这可能对 laravel 初学者有所帮助！

Laravel 8 如何显示和隐藏或变灰 Div 当另一个 Div 外键的下拉选择值来自不同 table

Laravel 8 how to show & hide or grayed out Div when another Div Dropdown selection value of foreignkey from different table

html

javascript

jquery

laravel-8